Getting Started with Lottie.js
About 10 years ago web animation was in big trouble. Adobe Flash was dying but there was still no obvious replacement. We needed a fast, easy-to-author, web-friendly format capable of staging larger-scale animated demos, cartoons, and banners.
Happily, in 2014 AirBnB offered us their solution – Lottie.JS.
Key Takeaways
-
Lottie.js Emergence as a Flash Alternative: About a decade ago, the web animation landscape was in flux due to the decline of Adobe Flash, lacking a clear successor for creating web-friendly animations. In 2014, AirBnB introduced Lottie.js, a vector-based animation format designed for fast, low-bandwidth animations that work seamlessly across multiple platforms like Web, iOS, Android, Windows, and React Native. Developed by AirBnB’s Salih Abdul-Karim, Lottie aimed to offer a scalable and efficient solution for animating vector graphics, positioned as an alternative to GIFs, MPEG, or CSS animations.
-
Advantages and Ecosystem of Lottie.js: Lottie.js stands out in the crowded field of web animation options due to its growing ecosystem of high-quality visual animation tools and the ability to produce smooth, fast, and scriptable animations. By leveraging JSON files for animation instructions, Lottie provides a streamlined workflow for creating animations that are both high in quality and efficient in performance, reminiscent of the combined authoring and deployment strengths of Adobe Flash.
-
Tools and Practical Use Cases for Creating Lottie Animations: Creating Lottie animations is accessible through various “Lottie-capable” animation tools, with considerations for both the quality of the animation tool and the ease of deploying Lottie code. From Adobe After Effects to Keyshape and LottieFiles, each tool offers unique features, pricing, and platform support, catering to different needs and expertise levels in animation. Keyshape, with its one-off pricing, represents a cost-effective solution for infrequent animators, while Flow offers a comprehensive package for regular animation work. LottieFiles enriches the ecosystem further by providing a community, marketplace, and simple editing utilities to support Lottie animation creation and sharing.
What is Lottie?
Lottie.js is an open-source, vector-based animation format created by AirBnB Experience and Motion Designer, Salih Abdul-Karim. The Lottie engine was designed to render fast, crisp, low-bandwidth vector animations identically on Web, iOS, Android, Windows and React Native.
In short, if you enjoy using SVG for your imagery, Lottie is a great way to animate those vector graphics. If you’re looking to replace GIFs, MPEG, or CSS animation with something lighter faster, and more scalable, Lottie may well be your best answer.
As Bashir Ahmed’s beautiful example demonstrates, Lottie can produce character-rich, lithe, fluid movement from tiny files – this animation is generated from a 54kb file.
At their most basic, Lottie animations like Bashir’s require just two files.
- The Lottie animation player (Lottie.js)
- The JSON animation instructions file
Why would I choose Lottie?
There are many ways to animate web vectors – from CSS animations to SVG’s SMIL to GreenSock, AnimeJS, and other JavaScript libraries.
However, Lottie has a killer ‘one-two punch’ of:
- a growing ecosystem of high-quality visual animation tools
- the ability to export smooth, fast, efficient, scriptable animations
For all its well-documented problems, Adobe Flash’s long success was based on combining a good authoring tool with easy cross-platform deployment. I think Lottie shares some of Flash’s advantages.
How do I create a Lottie Animation?
As Lottie files are nothing more than JSON text files, technically you could just code your animation straight into any IDE. In reality, you’ll want to select a ‘Lottie-capable’ animation tool. Here are my thoughts on the handful that I’ve tried and tested.
Lottie Tools Round-up
In my view there are two factors to consider when selecting a Lottie Animator:
- Is it a good animation tool?
- Is it easy to deploy your Lottie code?
I’ll cover these two areas separately for each tool.
Adobe After Effects
Ok, this is arguably a controversial take, given the Lottie format was built for After Effects, but I don’t believe AE is the best Lottie creation platform… for most people.
Firstly, it isn’t cheap. If you’re already paying a Creative Cloud subscription, the cost won’t be an issue. But if you’re NOT currently a CC subscriber, you will be biting off a new ongoing minimum charge of $US21/month.
Secondly, Lottie was conceived as a clever way to ‘hack’ After Effects into making web graphics. While After Effects is an incredibly powerful tool, it’s designed to produce everything from Hollywood special effects to movie title sequences to 3D game cut-scenes to big-budget TVCs. There’s a boatload of stuff you simply won’t need or want.
If you are already an ‘After Effects guru’, by all means, leverage your hard-won talents and make amazing stuff. Likewise, if you’re a Windows or Linux user, After Effects may still be your most viable option.
However, if you’re currently a Mac-based AE novice, there’s an argument that using After Effects to make Lottie animations is like water-skiing from an aircraft carrier.
Sure, you can do it, but there are easier ways.
| Cost: | US$20.99/mo |
|---|---|
| OS: | macOS, Windows, Linux |
| Link: | Adobe After Effects Download |
Haiku Animator
As I write this (2022), Haiku Animator appears to be a tragic victim of being the perfect product at the wrong time.
Animation Tools
Launched in 2018, Haiku was built from the ground up as an ideal blend of design and code. The animation tools were rich and powerful and the UI was fast and sensible.
Export Options
However, for me it was Haiku’s export tools that really set it apart from anything else, offering ready-to-use code for React, React Native, iOS, Android, Vue, and Angular, as well as traditional GIF and Video.
Sadly, development on Haiku began to peter out some time in 2020 as the team pivoted to another product. They officially open-sourced the Haiku codebase in late 2021. Apparently, it still works if you go through the installation process, but the prospects for future development and support appear shaky.
In Summary…
I only mention Haiku here in the slim hope that it has been revived by the time you read this. It was an excellent product (I paid for it) and is sorely missed.
| Cost: | Free |
|---|---|
| OS: | macOS, Windows, Linux |
| Link: | Haiku Download |
Flow – (the ‘Why not?’ pick)
Flow is arguably the logical heir to Haiku’s legacy – a nicely featured animator that delivers neat, production-ready Lottie code for a range of popular web and mobile platforms.
Incidentally, it weighs in at a tidy 88Mb installed on my MacBook, which is handy for anyone with space limitations (that’s me). Unlike Haiku, there are currently no Windows or Linux options offered.
Animation Tools
Although Flow pitches strongly at Sketch users, it will work with practically any SVG file you provide. It was simple to import and sync my Figma files, and Flow even did a very creditable job at ‘smart auto-animating’ the tween states between two static SVG frames I gave it. It wasn’t a flawless import of what I had, but it was competent enough to be useful.
Flow doesn’t offer much in the way of built-in drawing/shape/text tools. Ultimately, this isn’t a big deal, since syncing between Flow and Figma/Sketch works very well, and this helps keeps the Flow animation UI sharp and uncluttered.