🌱Aadam's Garden


Search IconIcon to open search


Last updated Aug 24, 2022

author: Andy Dent

# Article

# From ugly-GPL-free to inspirational procedural animation, your alternatives to Adobe After Effects.

Animation timeline with bars showing different properties changing at varying times.

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

Sketch of dinosaur and elephant next to small dog, to show how much smaller Lottie files are compared to PNG and GIF.

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.

# Text Formats Rule

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.

# The Hub of the Lottie Community — LottieFiles

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.

Screenshot of LottieFiles website showing their “layer tinting” tool being used to modify a melting lolly animation.

LottieFiles layer tinting tool in action

# Synfig Studio: classic GPL Open-Source project

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.

Screenshot of Synfig Studio visual animation product showing a magenta circle being animated by changing the Origin property over time.

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

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.

Screenshot of Keyshape visual animation editor showing a hamburger icon with its timeline of how portions move.

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.

Screenshot of Keyshape visual animation tool showing the editor for timing curves, that changes the rate at which part of the animation occurs.

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

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.

Screenshot of Flow visual animation tool showing the editor for timing curves, that changes the rate at which part of the animation occurs.

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.

# Cavalry

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.

Screenshot of Cavalry visual animation editor showing a vector animation and Lottie export selected.

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.

# LottieLab

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.

Screenshot of the LottieLab editor showing two people editing an animation

LottieLab in action showing multiple editors

# Conclusion

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.