A Lottie file is a lightweight, vector-based animation saved as JSON (or the compressed .lottie format). It plays in websites and apps with a small player, stays sharp at any size and is far smaller than a video or GIF. Lottie files are usually exported from After Effects.
Lottie is an open-source animation format released by Airbnb in 2017. It lets designers export vector animations that developers can drop into websites and apps without turning them into heavy videos.
Lottie vs GIF vs MP4
| Lottie | GIF | MP4 | |
|---|---|---|---|
| Type | Vector | Raster | Video |
| File size | Very small | Large | Medium |
| Scales without blur | Yes | No | No |
| Transparency | Yes | Limited | Not by default |
| Interactive | Yes (play on hover, scroll, click) | No | Limited |
| Best for | Logos, icons, UI animations | Quick sharing | Complex scenes, footage |
JSON vs .lottie
The original Lottie format is a .json file that describes shapes and keyframes. The newer .lottie (dotLottie) format compresses that JSON and can bundle several animations and assets in one smaller file.
How Lottie files are made
- A motion designer animates vector artwork in Adobe After Effects.
- The animation is exported with the Bodymovin plugin or the LottieFiles plugin.
- The file is tested in a Lottie preview to check that every effect is supported.
Not every After Effects effect works in Lottie. Shape layers, masks, trims and transforms work well; heavy effects and raster footage do not.
How to use Lottie on a website
- Webflow supports Lottie natively: upload the file and control it with interactions.
- WordPress uses a Lottie block or plugin, or a small embed script.
- Apps use official Lottie libraries for iOS, Android and React Native.
From the studio: for logo animations we deliver Lottie for the website, plus MP4 and GIF for social media and presentations, so every channel gets the right format.
Related guides
We create logo animations delivered as Lottie, MP4 and GIF files.
FAQ
What is a Lottie file used for?
For lightweight vector animations on websites and in apps, such as animated logos, icons, loaders and illustrations.
How do I open a Lottie file?
Use a Lottie preview tool or player, or upload it to a platform like Webflow that plays Lottie natively.
Is Lottie better than GIF?
For websites and apps, usually yes: Lottie files are smaller, sharper and can be interactive.
Can I convert a Lottie file to MP4 or GIF?
Yes, Lottie tools can render the animation to video or GIF for social media.
Founder of SkyDesigner. Fiverr Pro Vetted designer, selling on Fiverr since 2014 with 24,500+ reviews.
