Lottie is an open-source vector animation file format.
Lottie animations are infinitely scalable, so can be displayed at any resolution without pixelation.
They behave very similarly to SVGs, and have tiny file sizes, making them ideal for icons and illustrations inside web pages and mobile apps.
Tiny file sizes - As a vector animation format, Lottie takes up a tiny amount of space, meaning that web pages with lottie animations will load fast. Likewise, apps that use lottie animations will download quickly and won't occupy lots of storage space on users' phones and devices. When compared to other animation formats like MP4 and GIF, Lottie can be 10x smaller for the same animation.
Scalable - You can think of lottie animations as being animated SVGs. So all the same places that you'd use an SVG are also appropriate place to use a lottie. For example, they can be used as icons on buttons and in nav bars. Or as loading indicators or empty state illustrations. They are ideal for use as illustrations on landing pages and hero sections to help explain what a product does in a way that would be hard to do with a static image. Since they are a vector, rather than raster format, displaying them at different resolutions, e.g. on a large TV or computer screen will have the same quality as if displayed on a small phone screen or tablet.
Run anywhere - Lottie animations are broadly supported across a range of platforms. Running on all major browsers, as well as Android, iOS, Windows, and Mac. You can also use Lottie animations within popular platforms like WordPress, Webflow, Framer, Wix, Figma, Canva, and more. For developers there are many existing libraries for managing lottie playback, with libraries available for popular languages (JavaScript, Swift, Java, etc) and frameworks like React, React Native, Vue, Flutter, and more.
Industry standard - With support across a wide variety of tools and platforms, for both playback and editing, once you create a lottie animation you can run it pretty much anywhere. Lottie has the broadest support of any vector animation format, and can be created and edited within a range of tools, whether you need a fast easy tool like Lottielab, or are a motion graphics professional with years of experience inside After Effects, you don't need to learn a new workflow to use the format.
Open source - Lottie is fully open source. Both the format and the player's are free to use and modify. The lottie project is a member of The Linux Foundation and recognised by the Internet Engineering Steering Group (IESG). Both the "video/lottie+json" MIME type and ".lot" file extension are registered with the Internet Assigned Numbers Authority (IANA). Making lottie a stable format on top of which anyone can build with confidence, knowing both the specification and the implementation will remain stable over time. This openness and community driven approach has resulted in lottie becoming the industry standard format for vector animation.
Lottielab-The best way to create lottie animations. There are tons of premade animations that can save you time, and the interface is incredibly friendly and intuitive, even for someone completely new to animation.
After Effects-Ideal for people who have existing motion design experience as it means you can use your existing skills and knowledge to create lottie animations. However not all features work when exported as a lottie so requires taking care when constructing your animation.
Figma-You can create static designs inside Figma and then use tools like the Figma to Lottie plugin to add animation to your designs.
Canva-You can import lottie animations into Canva and use them to add motion to your designs. Canva can't natively edit lottie animations, but it does allow you to add ones you've already made in tools like Lottielab.
Lottie Editor-If you want to make changes to an existing lottie animation, whether this be changing text, colours, or adding and deleting elements you can do so using this lottie editor. Just upload your file, make the changes you need and then download the new file to use in your project.
Lottie Previewer-If you have an existing lottie animation and want to make sure it is displaying properly, you can use this lottie previewer to make sure it appears as expected.
SVG to Lottie converter-Convert an SVG file into a Lottie animation.
Figma to Lottie plugin-Convert your figma designs into lottie animations.
Lottie to GIF converter-Convert a lottie animation into a gif.
Lottie to MP4 converter-Convert a lottie animation into an MP4 video file.
Lottie to Video converter-Convert a lottie animation into a video.
Lottie to dotLottie converter-Convert a lottie JSON animation into a compressed ".lottie" file.
Lottie Web-A JavaScript library for rendering lottie animation on the web.
Lottie React-A react library for rendering lottie animation on the web.
Lottie iOS-An iOS library to natively render lottie animations inside mobile apps.
Lottie Android-A mobile library for Android that renders lottie animations natively on mobile.
Lottie React Native-A React Native library for rendering lottie animation on mobile.
Lottie Windows-A library for rendering lottie animations natively inside Windows desktop applications.
GIF-If you only need a specific resolution and aren't sensitive to file sizes, GIF will give you the broadest compatibility across different devices and platforms. It is a format that most people are familiar with and can work nicely provided you keep the resolution small. Tools like Lottielab can also output GIFs for quick and easy playback, which can be a great alternative to lottie in situations that don't require vector playback.
MP4-MP4 is a great choice for animation playback if you need a high quality video file. It's a widely supported format and can be used in a range of video player and website hosting environments. Especially useful if you are using an animation with lots of raster assets such as images or videos. Video files can often take longer to load and unfortunately will look pixelated if scaled up to larger resolutions, so should only be used when you don't need to change the size of the animation. But if you only need a fixed resolution then MP4 is a strong choice as it provides fast playback once it's been loaded. Lottielab supports outputting MP4s, which lets you keep the power of an easy to use vector animation tool, whilst letting you then export higher resolutions of the video if you need to at a later date. This can be a fantastic middle ground for certain usecases, letting you control the size and quality of the animation after creation.
Rive-If you have more complicated animation needs then Rive can be a useful format. Rive can be used to create animations that have complex interactions rather than just doing the simple animations that lottie is good at. However Rive has a larger performance overhead than the Lottie players since it needs to load a large binary runtime & render engine to support these complicated interactions. Unfortunately it doesn't use native rendering techniques like the Lottie players do which makes it less ideal for UI animations that need to be small and fast to load. But it can still be a good choice for video games, where file sizes and first time load speeds are less important. There are a number of Rive experts that can help you create these files, and a talented Rive professional can do a great job in making your game UI look super advanced.