How Lottie made our animation handoffs a lot simpler

Our brand refresh last December ushered in a completely new set of colours, illustration guidelines, and a brand new fully animated logo. The re-design captured Synthesis’ human-centred approach to data science, as represented by the animated logo combining an organic, handwriting-like typeface with a more geometric font.

I was applauding these welcome changes until I realised that we’d need to put that fancy new logo on our website. While I’ve done numerous animations in the past (including this piece on the most-hyped sneakers of 2019) translating an animated logo from a gif to a smooth, scalable animation was a new challenge for me.

This article explains our process of choosing Lottie for displaying our logo and other illustrations, and how we eventually used it on the site.

The rejected solutions

Snippets of some of other visualisations written in D3 that leverage SVG & other code-first approaches

We considered a few obvious solutions for displaying our new animated logo.

First, we could use a gif to represent the entire animation, which we could then load as an image on our website.

However, a gif is a rasterised image, meaning it loses quality as you blow up the resolution of display. This would make displaying a gif difficult at the different resolutions and screen sizes that our website supports.

The second idea was at the other end of the spectrum. What if we wrote a full, custom animation in SVG? HTML supports SVG (Scalable Vector Graphics) layouts that, as a vector form of image representation, would not lose quality at different scales. However, this would be incredibly tedious and require lots of code to manually interpolate between all the different states of the animation.

Enter Lottie

Lottie was an option suggested by our product designer, Haiying. I initially met it with skepticism. I was worried about introducing a new library so late into development as it could have a steep learning curve, or cause unintended side effects.

The Lottie cover animation

However, given the lack of other options and after taking a quick look at the creator of the library — Airbnb, known for creating other great tools such as Enzyme and the Airbnb JS Style Guide — I decided it was worth a try.

Lottie works by taking an Adobe After Effects JSON snippet of a particular animation and converting it into an SVG or canvas based HTML animation. It takes care of all the specific animation code & conversions, so all the developer has to do is master its relatively simple API.

Lottie requires the Bodymovin plugin for Adobe After Effects, which does most of the heavy lifting by transpiling After Effects’ animation encoding into a JSON format. Haiying loaded up our logo animation, installed the Bodymovin plugin, exported the animation as a JSON, and handed me a sizeable 3MB file to work with.

The Lottie library itself is a simple NPM install that is immediately usable with a simple & well documented API.

$ npm install lottie-web

Lottie can then be imported with the following line in any JS file

// exampleComponent.jsx
import Lottie from ‘lottie-web’
import animation from ‘animation.json’ // Handed off from designer

You can load the animation as JSON into Lottie, which then targets a particular DOM node (in this case, we have a div with an id ‘animation-target’) to insert the animation. For React (Hooks), this would look like,

Lo and behold, I couldn’t believe what I was seeing on my localhost: our fully animated logo rendered as an SVG element in the browser! I waited the entire 13 seconds for the animation to loop to make sure that it wasn’t just a gimmick.

Not only does Lottie let you animate whatever you want in SVG or canvas form, it also provides some neat animation lifecycle methods to give more control over how to display an animation:

const animation = Lottie.loadAnimation({…})
...
animation.play() // Play animation
animation.stop() // Stop animation
animation.playAnimationSegment(15,25) // Play a segment

We quickly moved more of our animations into Lottie, including our multilingual welcome message that shows on clicking the “Get In Touch” button. The playAnimationSegment() API became super useful for the infographic on the left, from our piece on Beauty in India.

Conclusion

Lottie seems like a great option if you have animations (whether repeatable or sequential) that you need to put on a website of a frontend application. The handoff from animation to code is super simple and eliminates a lot of the custom code that otherwise needs to be written to animate things in SVG.

While we began using Lottie for the logo, we’ve since used it for scrolly-telling in our analysis of the rise of organic beauty in India. There’s certainly more things to do with Lottie, particularly when it comes to experimental data storytelling, that we hope to explore.