isotropic-2022
Share
Blog
Search
Menu

Video To Lottie Converter

Use this tool to convert web friendly video files (.mp4, .webp or .mov) to a .JSON lottie file. No need for after effects, and the images are encoded directly into the JSON file!

1) Upload File
2) Confirm FPS
3) Confirm Options (change if needed)

Click encode button, wait for up to 10 seconds

4) Download by clicking .JSON output link, which will appear below.

How To Use This Tool

Upload your video (mp4, mov or webp), enter the FPS (typically 30), change the options, and click encode. You may need to wait for a second, and the tool will generate a JSON Lottiefile for you to download and use in your projects.

No, you cannot use GIF files directly. But if you want to conver a GIF to a lottie, simply convert the GIF to a video format, and then use this tool to convert it to a lottie.

When converting, be sure to watch your file size. Upload an optimized video, and use the options that this tool provides to minimize your file size as much as possible.

Why Convert A Video To A Lottie?

If you don't have access to Adobe After Effects and the Bodymovin plugin, it's difficult to create a lottie. This tool offers a way around that.

Lotties are also really easy to make interactive, and videos are not.

How To Preview The Lottie JSON Output

Once you've converted the video to a lottie, you can preview it by uploading it on lottiefiles.com.

It must be smaller than 10mb to do this.

Is this the best way to do things?

No it's not. If you can create a lottie the normal way, do it. This is more hacky and may not work perfectly (flickering, dropping of frames). That's becasue it's not the "right" way of doing things. It's cool if you need it, but it's much better to export lotties directly from the Bodymovin plugin. You also have much more control.

Credit Where Credit Is Due

This is an adapted fork of ForrestO's Video To Lottie Notebook on ObservableHQ. We changed a few things and made it easier to use.

A Part Of IsoTools

A collection of ad-free, well designed, helpful tools for web designers and developers.
See All Isotropic Tools
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram