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.

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.