Images to Lottie - Convert PNG/JPGs to Lottie Animations Online

Mar 28, 2023

•

1 min read

Angus Yip

Merge PNG or JPG image sequences to Lottie JSON

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?