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

Mar 28, 2023
5 min read
Angus Yip

Merge PNG or JPG image sequences to Lottie JSON

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

將多個圖像 (JPG/PNG) 合併為 JSON 格式的 Lottie 動畫



Media Studio開發。請放心,在使用這個工具時,沒有任何東西會被上傳。所有數據都保留在你的瀏覽器中,我們不保留任何記錄。


  1. 選擇您想要組合成 Lottie 動畫的所有圖像
  2. 選擇您希望圖像的排序方式
  3. 點擊“Convert”
  4. 單擊“Download File”以下載您的 Lottie JSON 文件。
  5. 在您最喜歡的 Lottie 文件查看器上預覽文件。我們推薦 Lottie viewer by Drawer

什麼是 Lottie


Lottie 動畫的優點


如何將 jpg/png 照片轉換成為 Lottie

原本,你須使用Photoshop以.psd文件的形式把所有圖像做成一個圖像序列,然後再導入After Effects,再通過Bodymovin插件將其導出為Lottie JSON文件。然而,有了我們這一工具,這約五分鐘的工序就會減少至約六十秒,厲害吧!


Video to Lottie - mp4/mov/webm 到 Lottie 轉換器。 這個工具非常接近我們團隊想要的效果

Airbnb Lottie Docs - 更多關於 Lottie 的歷史/背景

LottieFiles - Lottie 文件和相關工具的平台。 你可以在這裡找到很多社群製作的 Lottie 動畫。

Preview Lottie Animation Live - Drawer 的在線 Lottie 查看器

Lottieflow - Finsweet 的一個以 UI 為中心的 Lottie 動畫庫