👨‍🎨 How to Make a Stunning Animation of a Typing Cat

We launched our agile project management tool Scrumpy a month ago. Since then we’ve been asked almost daily how we built the animations on our landing page. So here is everything you need to know to start adding animations to your website.

🕵️‍ Finding the Right format

Whenever you want to include an animated illustration on a website, you have to decide which format will be a better fit — a GIF or a video? 🤔 Especially when those animations have to be seamless, it becomes quite complicated. Here are some cons for those fromats:

Cons for GIFs

❌ No support for transparency
❌ Large file size
❌ Limited colors

Cons for videos

❌ No support for transparency
❌ Colors may not match perfectly (depending on compression)

SVG is still a thing

Besides videos and GIFs, it’s also possible to animate SVGs. There are some libraries out there, e. g. Keyframes, Snap, Anime.js or GSAP. But one library is unique: Lottie. With Lottie you can build animations directly in After Effects. Afterwards, you can export them with the help of Bodymovin, so that you can integrate them e.g. in websites. From their website:

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
A typing cat makes confetti 🎉

But which steps are necessary to embed such an animation on your website? Let’s see.

🤦‍ Import Illustrations to After effects

After painfully experiencing that it’s not possible to import .svg files into After Effects (c’mon Adobe 🙄), I looked at how else I could import our cat illustrations. The first obvious idea was of course to import Adobe’s Illustrator file format (.ai). That worked so far, and you could also convert the imported file into all layers and edit the paths directly in After Effects. But after some testing, I noticed that Bodymovin produced some strange errors during export, due to the way After Effects converts .ai files — doh!

Sketch to the rescue

Once our illustrations have been created (thanks Stella 👋), we manage them as symbols in Sketch. This is allows us to access them throughout the entire project (no matter if app, landing page or marketing material). And yes, we have one Sketch file for our complete Scrumpy design universe. It’s amaaazing.

All the better that there is a fantastic plugin called Sketch2AE which can copy vectors directly from Sketch to After Effects. That tool worked so much better than importing .ai files. 🤘

Another tiny animation we’ve built with Lottie 😸

🖌 Animate

Once all graphics have been imported into After Effects, you can start animating your paths. You can export your composition with the Bodymovin-Plugin. This will give you a .json file, which will be needed later by the Lottie player. The exported file contains your complete animation. 🤯 But I don’t want to dive in too deep — there are already some tutorials on this topic.

Supported Features

Most SVG features are supported, but it is recommended to check regularly if the animation still looks as intended after export. Here’s a list of all currently supported features:

  • Shapes paths, ellipses, stars, rectangles, fills, stroke, gradient fills and gradient strokes, dashes, trim paths (partial), rounded corners, transforms (position, anchor point, rotate, scale, opacity, skew, skew axis)
  • Solids
  • Images
  • Comps
  • Nulls
  • Texts Most fonts are supported, they can be exported as shapes or as raw text (but you have to load the font with CSS then). A single text declination is supported per text box. Not supported: text decorations like small caps or vertical scale.
  • Cameras Partially supported.
  • Expressions Partially supported.

📽 Render Animation

That’s where Lottie comes in. Lottie is available for all the platforms — iOS, Android, React Native and also for web! Here is a basic example of what it looks like to embed Lottie on your website.

// HTML
<div id="animation"></div>
// JavaScript
import lottie from 'lottie-web'
import data from './data.json'
lottie.loadAnimation({
container: '#animation,
animationData: data,
renderer: 'svg',
loop: true,
})

💎 Bonus: Check for Reduced Motion Option

Safari Browser has a setting to reduce screen motion. This, for example, is used to extend battery life. If you want to please users, you can check that setting in JavaScript and deactivate the animation if necessary.

const reducedMotion = !!window.matchMedia('(prefers-reduced-motion)').matches
if (!reducedMotion) {
lottie.loadAnimation({
container: '#animation,
animationData: data,
renderer: 'svg',
loop: true,
})
}

💡 Conclusion

Lottie is an excellent tool to animate vector graphics. But be careful — it’s very CPU-intensive to animate lots of elements at the same time. If you want to animate complex particle effects a classic video may be the better choice.

The file size is still impressive if you compress your assets with gzip. 570kB uncompressed vs. 35kB compressed for our banner animation at scrumpy.io is absolutely amazing. 🔥🔥🔥

TL;DR

1️⃣ Manage illustrations in Sketch
2️⃣ Use Sketch2AE to export to After Effects
3️⃣ Install Bodymovin for After Effects to generate the animation
4️⃣ Use Lottie to render animations in your browser

Got comments or questions? Hit the section below or feel free to contact me via Twitter!