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

Published: 5 months ago

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.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
1 month 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.

IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.


A relationship driven website creation company.


© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram