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


Step 2: Sketch2AE (now AEUX)


Step 3: After Effects

After Effects

Step 4: Bodymovin


Step 5: Lottie

Step 6: Photoshop


Step 7: Optimization





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

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