Google Design
Published in

Google Design

A Recipe for Designing Animations—Without Sacrificing Performance

For a redesign of the Google Chrome homepage, I took on the challenge of producing high-quality animations without contributing to latency

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.

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.

google.com/chrome/productivity/

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).

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.

--

--

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store