About 10 years ago, web animation had big problems. Adobe Flash was dying, but there was still no obvious replacement. We needed a fast, easy-to-author and easy-to-author format, capable of mounting animated demonstrations, cartoons and banners on a larger scale.
Fortunately, in 2014 AirBnB offered us their solution: Lottie.
What is Lottie?
Lottie.js is a vector-based open source animation format created by AirBnB Experience and Motion Designer Salih Abdul-Karim. The Lottie engine was designed to render fast, sharp, low-bandwidth vector animations identically to Web, iOS, Android, Windows, and React Native.
In short, if you like to use SVG for your images, Lottie is a great way to animate these vector graphics. If you want to replace GIF, MPEG, or CSS animations with something lighter, faster, and scalable, Lottie may be your best answer.
Lottie in action: Popeye the Sailor Man by Bashir Ahmed
As Bashir Ahmed’s beautiful example demonstrates, Lottie can produce smooth, fluid, character-rich movements from small files: this animation is generated from a 54 kb file.
At its most basic, Lottie animations like Bashir’s only require two files.
- The Lottie Animation Player (Lottie.js)
- The JSON animation instruction file
Why would you choose Lottie?
There are many ways to animate web vectors, from CSS animations to SVG SMIL to GreenSock, AnimeJS, and other JavaScript libraries.
However, Lottie has a “once or twice” killer of:
- a growing ecosystem of high-quality visual animation tools
- the ability to export fluid, fast, efficient, and scripted animations
Despite all its well-documented problems, the long-term success of Adobe Flash was based on combining a good custom authoring tool with easy cross-platform deployment. I think Lottie shares some of the benefits of Flash.
How do I create a Lottie animation?
Because Lottie files are nothing more than JSON text files, technically you could only encode your animation directly to any IDE. You will actually want to select a Lottie compatible animation tool. Here are my thoughts on the handful I’ve tried and tested.
Summary of Lottie Tools
There are two main factors to consider when selecting a Lottie Animator.
- Is it a good animation tool?
- Is it easy to deploy your Lottie code?
I will cover these two areas separately for each tool.
After Effects does a lot. But is it too much?
Okay, it’s certainly a controversial take, since the Lottie format was created for After Effects, but I don’t think AE is the best Lottie creation platform for most people.
First of all, it is not cheap. If you’re already paying for a Creative Cloud subscription, the cost is no problem. But if you are NOT a CC subscriber, you will pay a new minimum of $ 21 a month.
Second, Lottie was conceived as a clever way to “hack” After Effects. While After Effects is an incredibly powerful tool, it’s designed to produce everything from Hollywood special effects to movie title sequences, 3D game scenes, and big-budget TVCs. There are a lot of things you just won’t need or want.
You can definitely get some brilliant results, and if you’re already an “After Effects rock star,” take advantage of your hard-earned talents.
Similarly, if you are a Windows or Linux user, After Effects may still be your most viable option.
However, if you’re currently a Mac user with limited AE experience, there’s an argument that using After Effects to make Lottie animations is like water skiing from an aircraft carrier.
Sure you do, but there are easier ways.
As I write this (2022), Haiku Animator seems 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 combination of design and code. The animation tools were rich and powerful and the user interface was fast and sensible.
The Haiku animation interface
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 GIF and traditional video.
Haiku export options
Unfortunately, Haiku’s development began to fade in 2020 when the team switched to another product. They officially got the Haiku code base open source in late 2021. Apparently, it still works if you go through the installation process, but future development and support prospects seem unstable.
To sum up…
I only mention Haiku here with the little hope that it has been revived when you read this. It was excellent and is sorely missed.
Flow: (the selection “Why not?”)
Flow is arguably the logical heir to Haiku’s legacy – a well-featured animator who offers clean, production-ready Lottie code for a number of popular web and mobile platforms.
By the way, it weighs about 88 Mb neatly installed on my MacBook, which is useful for anyone with space limitations (it’s me). Unlike Haiku, no Windows or Linux options are currently offered.
Animation tools
Although Flow is strongly presented to Sketch users, Flow will work with virtually any SVG file you provide. I was able to import and sync my Figma files, and Flow even did a very credible job in the “smart auto animation” of the interpolation 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 does not offer much built-in drawing / shape / text tools. All in all, this isn’t a big deal, as the sync between Flow and Figma / Sketch works great, and this helps keep the Flow animation user interface sharp and tidy.
The Flow user interface
Code export
Flow offers excellent Lottie export facilities, but you will need to select one of two high-end plans to access it:
- Free: Most animation tools
- Media: $ 99 / year: add video export options (MP4, PNG, GIF, etc.)
- Code +: $ 199 / year: most code export options (Lottie for web, animated SVG, HTML, etc.)
- Pro: $ 299 / year: all code and video export options
The “Code +” level allows you to export Lottie to the web, though, a bit disappointing, you’ll need to upgrade to the higher-level Pro user plan to access Lottie for iOS and Android. This may or may not be important to you.
To sum up…
Flow isn’t the cheapest option, in the field of After Effects, but it’s not expensive if you animate regularly. It is an attractive and elegantly designed tool, perfectly adapted to create and deploy Lottie animations at a reasonable price.
The Keyshape app is an excellent product with only two issues.
- Only available on macOS.
- It has a very simple, unimpressive, almost naive website.
The Keyshape website does not fill you with confidence.
I admit I had low expectations when I downloaded Keyshape. The website calls it “amateur animation toy”, instead of “serious professional animation tool”. The modest price ($ 29) supports this idea. It can’t be good at that price, right?
To my surprise, Keyshape turned out much better than I expected. In fact, it is VERY good!
Animation tools
Sketch App as animator.
Installing the Keyshape app is a little less than 100 Mb on my Mac. The toolbar on the left side contains a dozen basic vector editing tools: lines, rectangles, circles, text, and the like. While I suspect most of us would use Illustrator, Figma, or Sketch to create our vector illustration, it’s still helpful to be able to make simple edits to your animator.
Keyshape allows you to create basic “symbols” and then manipulate as many instances as you want.
The animation timeline extends to the bottom panel. Automatic keyframes will create new keyframes each time you transform your artwork into canvas view. Clicking on an “interpolation” section gives you access to various relief features, such as customizable cubic bezels.
The board on the right gives you good control over any canvas object you select. As expected, this includes scaling, tilt, rotation, XY position, and combination modes, but also allows you to control SVG filters such as blur, shadow, contrast, and hue.
Export tools
Keyshape offers a variety of export options such as MPEG, GIF, SVG animation, CSS, sprite sheets, custom JS and even PNG image sequences.
The Keyshape export dialog, with the Lottie connector installed
Note that Lottie is NOT a default export option to Keyshape. You will need to install the free Lottie plugin for Keyshape to access this new superpower.
Is Keyshape missing something?
Keyshape does not offer any component export facility for React, Node, Vue, or any of the other popular development platforms, so you may need to resolve this part yourself.
It does not attempt to “intelligently automatically generate” interpolation states between imported SVG keyframes as Flow does.
But overall, there was nothing more obvious that I missed when using the Keyshape app.
To sum up…
I like animation in general and Lottie in particular, but the truth is that this is not where I spend most of my working hours. I’d like to do more, but months go by that I may not play any animation project. Do I really want another monthly subscription? Probably not.
To me, Keyshape seems like an amazing bargain for the power it offers, even if you hide it well.
Keyshape app details
Trying to put a single tag on Lottiefiles.com is not an easy task because they offer so much. This includes an active Lottie community, a Lottie asset market, Lottie tutorials, and Lottie presentation, preview, and hosting apps. It’s fair to say they’ve realized Lottie’s future.
The Lottiefiles editor
LottieFiles also offers a handful of simple Lottie editing utilities. This includes:
- Lottie SVG Tool: Allows you to drag and drop predefined animations to your uploaded SVG.
- Lottie Editor: A simple editor that allows you to adjust times and sizes in any pre-existing Lottie file.
- A customizable web player: Modify any Lottie animation before embedding it in your site.
Lottie Files: Your SVG tool in Lottie
let’s …