A Recipe for Designing Animations—Without Sacrificing Performance
By: Neil Shankar
Tags: Animation, Design, Tools, UX, Productivity

Step 1: Sketch

I started by designing a set of illustrations in Sketch, to set up each animation. Like many, I typically use Illustrator for graphic design, and Sketch for UI design. But because Sketch is so well-suited for flat, geometric vectors, I gave it a shot for these illustrations. I used Illustrator very sparingly—only for certain Pathfinder operations.

I also copied each artboard and created a set of static fallbacks, which I exported as PNGs. Fallbacks are useful for older browsers and in cases of animation failure. Also, fallbacks should be served to users who provide reduced motion requests for accessibility reasons.

Sketch

Step 2: Sketch2AE (now AEUX)

I then used Sketch2AE, the precursor to AEUX, to import all of my Sketch layers into After Effects. In AE, I use a lot of precomps and null objects. Rather than copying all of my layers into AE at once, I used Sketch2AE to copy groups of layers at a time. This made it easy to isolate the components I wanted to animate without manually sorting through a long layer list.

AEUX

Step 3: After Effects

In After Effects, I animated each 5-second composition to tell a story about Chrome. I leveraged internal Material motion guidelines to ensure smoothness and consistency. I also used trim paths to create a trail of the core brand colors, and incorporated this trail into every animation for narrative continuity.

After Effects

Step 4: Bodymovin

I then used the Bodymovin extension in After Effects to generate a JSON file for each animation. Each JSON file contains coded instructions for the entire composition. For safekeeping, I also rendered an MOV for each comp—more on this later.

Bodymovin

Step 5: Lottie

I handed off the JSON files to our creative developers, who used the Javascript library Lottie to generate an SVG for each animation. SVGs themselves are another form of coded instructions for animations, and can be written inline in HTML code. This means that no network requests are needed to render each animation—no huge GIFs or video files.

Our developers also wrote functions to trigger animation playback on scroll, and restart playback on click. This makes for a more intentional user experience than endless looping would have.

If you don’t have programming experience, you can use an online platform such as LottieFiles to upload a JSON file and preview its animation.

Step 6: Photoshop

For presentation purposes, I like to create a GIF for each animation. This makes it easy to share work internally for feedback throughout the design process. To do so, I imported each rendered MOV from After Effects into Photoshop using File > Import > Video Frames to Layers. I then used the Photoshop Timeline panel to create frame animations, and exported each animation as a GIF using Save for Web (Legacy).

If you have a long animation with thousands of frames, Photoshop may be slow to convert your frames to layers. In this case, I would use an online MOV to GIF converter. Keep in mind that these online converters are sometimes lossy, so your GIF may not have the same quality as your MOV.

Photoshop

Step 7: Optimization

I have a habit of optimizing all my exports for good file hygiene. I always start with a lossless compression tool, such as ImageOptim. Lossless compression will reduce file size without impacting quality. If the file size is still too large post-compression, I typically use a lossy compression tool such as ezGif on the lowest compression setting, to preserve quality.

ImageOptim

Done!

At the end of this process, you’ll have a lightweight SVG animation supported by a JSON file. You’ll also have an MOV and an optimized GIF for easy sharing, as well as a static PNG fallback.

These steps allowed us to successfully incorporate animations into the Chrome homepage without impacting performance. I used the same workflow to create an animation for the download confirmation page, and a variant for a landing page experiment. Plus, I’ve also shared this workflow with other teams at Google, who have since incorporated animations into their websites—hopefully you and your team find it useful, and if you have tips and tricks of your own, please share in the comments.

❧

Neil Shankar is a designer on Creative Engineering at Google, embedded through Left Field Labs. Visit tallneil.io.