Blog/ Creative

From Development to Motion Design: A minimalist approach to animation

From Development to Motion Design: A minimalist approach to animation

Before I became a motion designer here at Envisionit, I was a developer. It may seem like there’s not much of a connection between development and motion design, but my background in coding enables me to take a more efficient approach to coding animation, while still allowing me to keep an eye on design.

Starting from scratch

These days, motion design is very accessible. Programs like Google Web Designer or Adobe Animate make it easy to simply load elements, and drag and drop them into the right places at the right time. But those programs don’t help you optimize file size, and end up sacrificing quality for convenience. For example, in the days of limited data and screen size for display ads, file size and quality are a huge deal. Putting out a slow, pixelated ad could kill any momentum it has, so a minimalist approach is a very good idea.

I’m pretty comfortable coding ads without the help of a fancy GUI. Moreover, it allows me to start with nothing, keep my code light, and gives me more room for higher fidelity images.

My minimalist approach to motion design

Creating smooth animation efficiently is easy with a minimalist approach. Javascript — a programming language used to manipulate the styles and looks of a website (CSS) — is essential to making light and airy animations. There are some easy ways to use Javascript in your animations.

Libraries make writing Javascript much easier by offering standardized code that can work across multiple browsers. Basically, they are libraries of code shortcuts for developers to use when building experiences on the web. The two libraries I use most — jQuery and GSAP — are some of the most popular. GSAP, in particular, is fantastic because it’s very fast, pretty robust, and compatible with nearly everything.

These javascript libraries help in a few ways. When you add a plug-in to your code, you’re giving yourself more space for higher fidelity images and adhering to those ever-tightening file size limits. GSAP isn’t even recognized in the file size because Google hosts the plug-ins. It frees up a lot of file space and lets you get pack much more into your motion designs.

A maximalist approach to image quality

In order to keep those exciting motion designs looking good, you need to make sure your images stay sharp at any point during the animation. That’s why I use scalable vector graphics — more commonly known as SVGs — when I can. With an SVG, you can animate individual vector points in an image using javascript, and the image remains sharp even at the highest resolutions. The standard PNG cannot be manipulated at this level. Here’s are some examples of SVGs compared to PNGs at different sizes.

When you zoom in, a PNG shows pixels. The SVG retains its shape and clarity because it’s coded as a shape, rather than a bunch of static pixels stuck together. Plus, manipulating an SVG only requires a little bit of code, meaning you can do more with less.

All the graphics are SVGs, and I used the morph and draw GSAP plug-ins for writing the text and the logo-to-button transition. It’s a simple, fluid banner ad with attractive motion and crisp graphics.

Minimalism vs. practicality

While I prefer the minimalist approach, it doesn’t mean animation programs shouldn’t be used. Google Web Designer and Adobe Animate are great to get things started quickly, and excellent for very short animations. But things quickly get overwhelming when any complexity is introduced, outweighing the benefits. And then if you want to make changes later on, that only makes the file larger, and you risk downgrading your images.

I prefer a minimalist approach to animation because my background in development showed me how much of an impact code has on the final product. Just remember this: keeping it minimal behind the scenes gives you maximum impact on the front end.