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

Published: 1 month 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!

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.

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.
Ezoicreport this ad
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
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.

Author

Ezoicreport this ad
A relationship driven website creation company.

Connect

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