isotropic-2022
Share
Blog
Search
Menu

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:

https://observablehq.com/@forresto/video-to-lottie

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
daveclark966
daveclark966
11 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.

Yana
Yana
5 months ago

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

Article By
James LePage
Contributors/Editors
notloggedin
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.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram