Lottie is a new design format that is becoming increasingly popular with businesses big and small.
So, what exactly is Lottie?
We've been hearing this question a lot from marketing agencies, entrepreneurs and even web designers.
This article covers all you need to know about Lottie animations, including a FAQ section at the end to answer any additional questions you have.
What is Lottie?
Lottie is a JSON-based animation format that improves the interaction, and the quality of designs. It's interactive and responds to user input. Also, the vector structure of Lottie allows users to scale animations without losing the quality of the picture, and without increasing file size.
Why has Lottie become popular?
Not that long ago, developers used to struggle for every kilobyte of website and application files because slow loading times get users pretty upset.
Load times can make the difference between whether a user stays - or leaves your site. Even Google downgrades SEO rankings if a website is slow because bad experience is considered a key indicator of a bad website.
So what developers did back then was either decrease image quality for a faster load time, or use bigger files and create a longer load time. In both scenarios, user experience suffered.
But Lottie revolutionized digital design, giving everyone involved the best of both worlds.
Let’s break down the details of why they are so great.
Why Lottie is the best? The main benefits.
Lottie has a number of benefits, and almost all come from their size and flexibility. Sounds simple, doesn't it? But let's look at it from the user experience perspective.
1. Plays Everywhere
Lottie is multi-platform and plays everywhere: web, IOS, Android, React Native, you name it. Also, you don’t need any modifications for different platforms or screen sizes. You just create one file, and it’ll play on every platform, saving tons of time for designers and accelerating the process.
2. Always High Quality
You can zoom in and the quality will still be high and never pixilate. You can even do that when it plays (in real time) on any device. I want to keep this explanation as simple as possible, but if you’re curious to learn more, you can look up how vector images work.
3. Animation File Size
The size of a Lottie is always super small. To understand just how small, imagine that a PNG image is a heavy bison on your homepage. And a Lottie? It would be an ant.
4. Interactive Animations
Implement cool interactive animations that respond to mouse movement, scrolling, and more. Scroll down for a fun example.
What is Lottie used for?
You can use Lotties for almost any kind of digital visual purpose:
For example, an app or website hero animation, icon animations, interactive animations when scrolling, as well as element animations like loading, waiting, or menus. In short, use them anywhere you’d like to improve user experience.
Where Can I Use Lottie?
Lotties play on any platform; mobile, smartwatches, desktop applications, or websites. You can even use them on messaging platforms. So yeah, basically anywhere!
Can I Create a Lottie Myself?
Yes, but also no. Let me explain.
There are a lot of tools that can help you create animations. Marketers do a great job with convincing people that their software can create animations or blog posts. And then people think, “Oh yeah, I can do that.”
However, animation software is like any other tool. To animate means understanding: the speed, tempo, and a number of nuances that people spend years practicing and learning.
Having animation software and saying you can animate is like saying if you have a scalpel you can do surgery. So yes, technically you could create a Lottie. But you’ll need to put in a lot of work first.
Where Can I Get Lottie Animations?
There currently aren’t many places where you can purchase Lotties, but here are the best options available.
1. Creattie
Creattie is a curated design library dedicated to business solutions. The main difference that separates Creattie from other platforms is that all the designs are created by award-winning illustrators and animators. Also, Lotties here are sorted by industry to cover any business you may have.
2. LottieFiles
This is perhaps the biggest Lottie library, but you may be limited by choices that come only in the same style. This means if you liked an animation, it could be the only one in that style and you won't be able to fully cover your visual needs. Also, the quality can be lacking at times.
3. Drawer Design
This library isn’t big, but you can find relatively good quality design collections.
4. Motion Elements
A pretty small collection. Also, the quality can be very hit or miss.
Additionally, if you are looking for something specific, you can hire a team that specializes in creating Lottie animations and order custom designs.
FAQ
Why is it called Lottie?
JSON-based animation files are named Lottie after Charlotte "Lotte" Reiniger. She was a German film director considered the pioneer of silhouette animation who made the world's first feature-length animated film in 1926.
Lottie was created by Hernan Torrisi, who built a plugin for After Effects called Bodymovin that could convert animations in AE to JSON. The format caught the attention of developers at Airbnb, where the team built iOS and Android libraries to render the JSON files and named it Lottie in homage to the revolutionary film director.
Who uses Lottie?
Lottie is used by web designers and developers all over the world in every type of project that can benefit from lightweight vector animations. To answer the question 'How popular is Lottie?', over 250,000 companies use the format, including Google, Airbnb, TikTok, and Duolingo.
Is Lottie Better than GIF?
Regarding UI design or animated illustrations, Lottie is far superior to GIFs because it is less bloated and interactive. However, GIF is still the best way to use short video clips online, like the meme below.
Is Lottie better than SVG?
SVG and Lottie serve different purposes, so it isn't an apples-to-apples comparison. SVG is the best format for static vector graphics, but Lottie is better for rendering motion graphics.
Does Lottie cost money?
Yes, high-quality animations built as Lottie takes hours to create. However, libraries like Creattie and LottieFiles offer free options.
Is Lottie good for animation?
Lottie is highly effective and the most popular animation format for UI animation because it is exponentially smaller than other formats. In addition, Lottie is vector-based, meaning you can scale them up or down, and they won't pixelate.
Is Lottie good for web?
In short, yes, Lottie is the best way to implement animation on web-based apps. For a more detailed answer, check out this blog post exploring multiple use cases for Lottie animations.
Does Figma support Lottie?
No, unfortunately, Figma doesn't directly support Lottie animations. However, you can export a Lottie animation in SVG or GIF to preview the content for your projects.
Is Lottie a GIF?
No, Lottie is a vector-based file structure built with JSON. GIF consists of a sequence of images.
How much Lottie animation cost?
The price of Lottie depends on the complexity. While you can find Lottie animations for $1-$10 in a content library, custom animations can cost as high as $1,500. Learn more about how Lottie pricing works in this article.
How long can a Lottie be?
Lottie animations are most effective when they are concise. However, the format does not limit length.
Can Lottie do 3D?
No, Lottie is a vector-based format that doesn't support 3D animation. The closest solution would be isometric, also known as fake 3D.
Does Lottie support audio?
Yes, however, you'll need to add the audio layer in After Effects and use an additional library as well as an event listener in your JavaScript to sync the audio file with the Lottie animation.
How many frames per second is Lottie animation?
Lottie doesn't have frames, so there is no such thing as frames per second. However, you can adjust the speed of the animation thanks to JavaScript.
Is Lottie open-source?
Yes, Lottie is open source; you can view the documentation here and the source code on GitHub.
Where to create Lottie animation?
You have numerous options to build Lottie animations, including Adobe After Effects, Flow, and Haiku. Choosing which tool fits your workflow is up to you; however, we recommend After Effects and the Bodymovin plugin. You can learn how to create your own Lottie animations using various tools in this article.
How to convert mp4 to Lottie?
Unfortunately, converting MP4 into Lottie isn't possible. However, if the MP4 file has been exported from a vector-based animation, you can export as a Lottie instead of an MP4 file.
What is the format of Lottie?
Lottie is a JSON (JavaScript Object Notation) animation file with a vector structure.
How do I edit a Lottie file?
The easily accessible editing capabilities of Lottie animations are one of the format's most significant advantages. You can change the code directly or use online editors to adjust color, speed, or interaction. With Creattie, you'll have both options.
If you want to change the design of the animation, you'll need to go back into the software, make changes, and re-export it as a Lottie.
What platforms is Lottie supported by?
Lottie can be used with HTML and most CMS platforms. While some design platforms, like Figma, still don't support Lottie, WordPress, Shopify, Wix, and many other web development tools have Lottie plugins or built-in integrations.
Can you use Lottie in React?
Yes! React JS supports Lottie. Check out this tutorial if you want to use Lottie animations with React.
How to put Lottie in HTML?
You can use Lottie by embedding the code snippet or with an NPM package to render the file. This guide will show you both methods.
What browsers support Lottie?
All browsers that support contemporary JavaScript will render Lottie animations. These include but aren't limited to Chrome, Firefox, Safari, and Edge.
Can you use SVG in Lottie?
Static SVG files can be imported into After Effects, where they can be animated and then exported as JSON/Lottie files.
Is Lottie animation free?
Yes! You can download many Lottie animations for free on platforms such as Creattie. However, you'll typically have to sign up for a paid plan to access entire Lottie libraries.
Is Lottie editor free?
Yes, the majority of Lottie editors are free to use.
How do you animate a logo with Lottie?
Create your logo in After Effects or your preferred software and simply export it in JSON/Lottie format.
