Merge PNG or JPG image sequences to Lottie JSON
Note: Nothing gets uploaded, this tool works locally on your browser. We don't see anything or keep any records.
How to use
- Select all images you would want to combine into a Lottie animation
- Select how you want the images to be ordered
- Click "Convert"
- Click on "Download File" to download your Lottie JSON file.
- Preview the file on your favorite Lottie file viewer. We recommend this Lottie viewer by Drawer.
What are Lottie animations
Lottie is a JSON-based animation file format that enables designers to create animations for apps and websites. Lottie animations are small, lightweight files that can be used on any platform that supports HTML5, making them ideal for use in both web and mobile environments.
Advantages of Lottie animations
Lottie animations allow developers to easily create interactivity. They are usually vector-based, which means they are resolution-independent and are lightweight. However, while invalidating the latter two benefits, Lottie also supports creating image sequences like a gif. Unlike gifs, Lottie image sequences can still be made to interact with user actions such as scroll and mouse positions.
How we used to create Lotties using a series of images
The normal way to do it is to use Photoshop to create a Photoshop sequence (.psd), and then import it to After Effects, then export it with the Bodymovin plugin to create a Lottie JSON file.
With this tool, we reduced 5 minutes of work to a minute, which is not a huge reduction, but are you even a programmer if you haven't spent 20 hours automating a 5-minute process?
Video to Lottie - A local mp4/mov/webm to Lottie converter. This project is so close to what our team wanted!
Airbnb Lottie Docs - More history/context about Lottie
LottieFiles - A platform for Lottie files and related tools. You can find a lot of community-made Lottie animations here.
Preview Lottie Animation Live - An online Lottie viewer by Drawer
Lottieflow - A UI-focused Lottie animation library by Finsweet