How To Convert A Video (.mp4) To Lottie JSON

By James LePage
 on May 10, 2021
Last modified on January 6th, 2022

How To Convert A Video (.mp4) To Lottie JSON

By James LePage
 on May 10, 2021
Last modified on January 6th, 2022

So you have a video on your computer, but it is not in the format needed for Lottie. This article will help you convert that video to a JSON file so you can use lottie with ease!

Update July 2021: Due to the popularity of this article, we've launched our own Video To Lottie Conversion tool. Check it out here!

With this specific use case, you have a .mp4 video file that you want to convert into a lottie JSON. It should be noted, if you have access to the source, exporting from After Effects using the Bodymovin plugin is best. But if you come across a small, looping video, this method may be helpful.

Download the MP4 and figure out the frame rate / total number of frames.

To find the total number of frames, use this equation: Frame Rate (fps) * Total Duration = Frames in Clip. For example, a clip with 30 fps running for one second would have thirty frames. You can also use a collection of online tools to do this step for you.

Now its time to make the video into a lottie. Go to this helpful tool:

Upload the .mp4 file.

By default frame rate is 30

Set the frame rate.

There are then a few options to set; Scale output, frame rate, quality, clip start, clip end. Play around with scale, frame rate, and quality, to get a small(ish) lottie json. The last two can be left at defaults.

Click the encode button, and there you go! Your video has been converted into a lottie, which can now leverage the powerful effects like play on scroll, interactions, and transitions.

We hope that this article was helpful in teaching you how to convert a video to a lottie JSON file.

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
5 months ago

a professional MP4 to After Effects converter - Avdshare Video Converter will help you convert the unsupported MP4 file to any After Effects best supported MPEG-1, MPEG-2, etc.

4 hours ago

Thanks a lot for this option!!! It is very useful!

Article By
James LePage
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram