Vectors, not pixels
The same file is crisp on a phone and on a 4K screen, because shapes are drawn live instead of stored as frames.
GUIDE · LOTTIE ANIMATION
Make a Lottie
from your own design.
A Lottie is a small JSON file that describes a vector animation, so it stays sharp at any size and plays in websites and in iOS and Android apps. Most Lottie files are still made in After Effects. Ilo Animation makes them from your own artwork, in the browser or inside Illustrator, with no After Effects and no Bodymovin.
01 — WHY LOTTIE
What a Lottie does
that a GIF or a video can't.
Light files
An icon or logo animation is usually a fraction of the size of the same animation as a GIF or MP4.
Sits on any background
No box around it: the animation sits on your page or app screen like any other graphic.
Web, iOS, Android
The open Lottie players run in browsers and in native apps, and tools like Webflow and LottieFiles open the file directly.
02 — HOW TO MAKE ONE
Three steps,
no After Effects.
- 01
Bring your design
Open an SVG, an Illustrator .ai or a PNG at ilotools.com/app, start from one of 23,040 templates, or use the panel inside Illustrator on your open document.
- 02
Animate it
Magic gives every element its own move in one click. Then change any move, its timing and its easing on a real timeline, or add keyframes.
- 03
Export Lottie
Export › Lottie at 24, 30 or 60 frames a second. The same animation also exports as animated SVG, GIF, MP4 or WebM.
03 — QUESTIONS
Good to know.
What is a Lottie file?
A JSON file that describes a vector animation: shapes, colours and how they move over time. A Lottie player draws it live, which is why it stays sharp and small. Lottie started as an open-source library from Airbnb and is now the common format for animations in websites and apps.
Do I need After Effects to make a Lottie?
No. After Effects with the Bodymovin plugin is the classic route, but Ilo Animation writes Lottie JSON directly from your design, in the browser or inside Illustrator.
What ends up in the file?
Shapes with fills, strokes and linear or radial gradients, letters as vector shapes (no font needed), lines that draw themselves, mask reveals and embedded pictures. Every move is baked into keyframes, so every player shows what you saw. More on the SVG to Lottie page.
How do I use the Lottie on my website?
Upload the .json to your site or to LottieFiles and play it with the lottie-web player, or drop it into a builder that supports Lottie, such as Webflow. For iOS and Android apps, hand the file to your developer.
What does it cost?
Opening and animating are free. Exporting starts a 5-day free trial with every feature and no card; see pricing after that.