Why Lottie is the Future of Animated and Interactive Design
Have you ever used an app or website and seen that theres an animated logo, interactive icons or animated banner? How did you feel about it? Personally I found it pretty striking and felt that the application was more alive. The power of animations and interactivity are starting to make their way in to our lives, and our digital experiences are only going to be more fun and immersive thanks to it.
When done right, animations and micro-interactions help you stand out and become more memorable for your users and Lottie is quickly becoming the industry standard tool.
What is Lottie? 🤔
Lottie (named after Lotte Reiniger) is a library developed by Airbnb available on all major platforms iOS, Android, web and desktop that plays animations exported from Adobe After Effects. To export animations from After Effects, you’ll need a plugin called Bodymovin created by Hernan Torrisi.
Airbnb wanted to solve the problem they and many others were facing — how can we have animations without having to painstakingly code them?
How does it work? 🛠
The current pipeline for creating Lottie animations looks like this:
Illustrations can be created using your favourite vector graphics editor and imported in to After Effects as shape layers.
Animations are then exported to a small .json file (human-readable data file format) by the open-source plugin Bodymovin.
The Lottie player then takes the exported file and renders the animation on the device or browser. The same .json file can be used across platforms and has a tiny file size compared to exporting as a GIF or PNG sequence.
Why Lottie is a game changer 🕹
- Lottie allows designers and animators to create, test and perfect animated logos, micro-interactions and more without having to burden engineers with this task. With plugins for After Effects from LottieFiles they can even test on mobile before handing the animation over to engineers for integration
- Lottie animations have a tiny file, generally only weighing a few kilobytes
- Interactions create a more fun and lively experience and because we have full control over the state of our animation lots of different interactions are possible (hover, click, play on show.. check out lottie-interactive)
- Render once use everywhere. Because Lotties are rendered as the .json format, as long as your platform has a player it’ll be able to play the same animation file everywhere!
- Even when Lotties are rendered, you can modify the exported file to tweak colors, stroke widths and more. You can either do it in code or use the LottieFiles editor
Whats in store for Lottie
Heres some predictions of what I think the future of Lottie holds:
- More no-code solution integrations for Lottie
- Ability to create Lottie animations without After Effects
- More effects available
- Smaller Lottie player sizes
Helpful resources
- Free Lottie animations: LottieFiles
- Supported effects for Lottie
- Bodymovin After Effects plugin
- LottieFiles After Effects plugin
- List of awesome things Lottie
Hey! 👋 Thanks for reading! I’m Sam, creator of SVGenius and love creating content about Lottie. If you need some help getting started be sure to check out some of my tutorials on my YouTube channel.
