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

Illustration of a woman watching a video on her laptop.

Merge PNG or JPG image sequences to Lottie JSON

File upload

Sort by

Note: Nothing gets uploaded, this tool works locally on your browser. We don't see anything or keep any records.

How to use

  1. Select all images you would want to combine into a Lottie animation
  2. Select how you want the images to be ordered
  3. Click "Convert"
  4. Click on "Download File" to download your Lottie JSON file.
  5. 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?

Useful Links

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

Angus Yip
Web designer @ MSHK

Ex Silicon Valley full-stack developer. Web designer, SEO expert, and co-founder of Media Studio Hong Kong.

Two illustrated person sitting on the ground and brainstorming.
Subscribed yet?

Never miss anything new again

Thank you for subscribing! You'll receive a welcome email.
Error! Please try again.