Article

Last updated Aug 24, 2022

• Type note
• Status needs revision
• Source article
• On animation
• On svg

author: Andy Dent

Flow timeline from Skype tutorial

Lottie is an incredibly successful format for describing vector animation. Vector means shapes moving and changing, as opposed to a video-like animation where you have pixel-by-pixel changes every 1/24th second. Storing shapes and changes is dramatically more efficient in space.

Update 2022–02–11 — see LottieLab new tool added at end.

It uses a tight JSON text file format. You could call it the animation equivalent of SVG (which is somewhat, awkwardly, animatable itself but failed in that domain).

Scientific comparison of animated file format sizes.

Most of the articles about Lottie refer to the bodymovin plugin which generates the files from Adobe’s After Effects™. It’s a great success story of an in-house project being released as open-source that grows dramatically because of how well it meets a need. Thanks, AirBnB, for some great libraries for rendering Lottie animations, especially for mobile developers.

You can measure the worth of an unofficial file format by the ecosystem that develops around it. Lottie is no exception — there are at least four significant animation products now generating Lottie. This acknowledges the stability of the file format as well as the size of the community.

Text-based intermediate formats are brilliant enablers. They may be awkward to edit. But, provided they are fairly stable as you edit the main documents, they work well in version control. You can easily see the degree to which documents have changed. If you have a simple change to re-apply across many documents, you can do it once in a visual editor then replicate with a scripted search/replace.

Much of this article comes from a talk I gave in August 2021 at DDD Perth, walking through the tools discussed below.

Pre-recorded video for DDD21 Perth conference

You can see the material from the talk on GitHub, including the sample projects.

Unlike the world of icons and illustrations, there are fewer sites in the Lottie space from where you can download files. The eponymous LottieFiles offers a range of free and paid Lottie animations ranging from simple spinners to full-page works.

As well as hosting files and documentation on Lottie, LottieFiles provides a convenient previewer and a simple tool for tinting layers.

LottieFiles layer tinting tool in action

Synfig’s serious OSS credentials are emphasised by winning backing for work from the 2021 Google Summer of Code.

It’s built-in the venerable GTK cross-platform UI toolkit with no attempt to compromise for Windows or Mac users. The app looks the same across Mac, Windows, and Linux. As a GPL-licensed app, full source code is available and of course, it’s free.

People typically use Synfig for full studio animations. However, it’s also capable of making simpler animations you’d use in UI from Lottie. Within minutes, you can animate simple shapes moving around.

The Synfig Studio editor running on a Mac, editing a simple shape animation

Amongst the various plugins bundled in Synfig is a Lottie exporter. This generates an HTML demo file running the JSON. See the recordingDay.sifz family in our animationOutput.

KeyShape is a very straightforward vector animation app running on Mac desktops. It’s available for a once-off USD $30 on the Mac App store, which means you can install it on multiple computers in your personal collection. The 14 day free trial version on their website lets you give it a good workout prior to buying.

Unlike all the other tools discussed, its plugin-based export scheme also providers importers. So it can import basic Lottie JSON files downloaded from LottieFiles, for visually editing them, then exporting them back out again.

KeyShape editing window after opening the Hamburger from LottieFiles

Keyshape has very easy to use timing support also making it easy to tweak the timing curves of the Lottie animations, either starting from someone else’s work or from scratch. In the conference presentation, I made the top of this hamburger pop a little more exuberantly.

KeyShape timing curve editor

Internally, Keyshape uses an expanded SVG with a few attributes added to describe the animation. That provides a simple model which is easy to understand if you want to expand their open-source import/export plugins.

Flow is a little different. It started as a way to generate code for animating mobile interfaces and that’s still the core focus. Lottie is just one of several animation code formats supported. The rest are actual native code — if you’re writing a native Android or iOS app and want many animated buttons, pure code is a further order of magnitude more compact than Lottie.

Flow makes it ridiculously easy to build animations where you can visually edit your starting and editing state. They started with a pure tweening style — feed in identical Sketch documents that are the start and end of the animation process and it works out everything in between. That might be adjusting positions, visibility, colour or shape of items.

Flow in 2022 still works quickly from the two-artboard approach but has a lot more flexibility in editing to build up your animation. Their timeline and timing curve editing is clear and flexible.

Flow timing curve editor

Flow’s code export gives you options for Lottie that none of the other tools include. As well as generating the basic JSON file of the animation, they create all the scaffolding to use that Lottie file in your mobile app or web page.

They also export CSS and SVG animations so you can try the effect using different tech and decide which works best. See all the animation export for a simple Lottie from the video, on GitHub.

Flow’s pricing reflects the powerful additional code-generation options.

• Media USD $99/year for creating animations & export as movies.

• Code+ USD $199/year for native code export including Lottie.

• Pro USD $299/year adds many specialised templates such as onboarding screens, spinners and toggle buttons.

Cavalry is an intimidatingly powerful product for producing complex animations, including procedural logic. It’s a UK product, about USD $22/month for a version with unmarked export, but you can learn it for free.

Cavalry main visual editor with Lottie export selected.

You can watch a video of Cavalry publishing to Lottie here, from which the above screenshot was taken. My conference video doesn’t mention Cavalry as I unfortunately only found out about it after the recording day. I look forward to having time to explore their interface and procedural goodies.

Whilst answering a question about Rive (no, that does not seem to support Lottie) my research led me to find LottieLab, which has come out since my talk! It’s a pure native Lottie editor that looks amazing and I’m keen to get my hands on the beta. Like KeyShape, it reportedly can directly import existing animations. Most exciting, as seen on the landing page, is that it seems to be a collaborative editor like Figma.

LottieLab in action showing multiple editors

Lottie is an open-source success story. Apart from the great code we thank AirBnb for contributing, it’s now solidly established as a format. The tools shown here, and others to come, mean you should take Lottie seriously as a part of your animation toolkit.