You cannot directly convert MP4 files to LottieFiles within Webflow itself, but you can achieve this using external tools. Follow these steps to convert your MP4 video into a Lottie JSON file and upload it to Webflow.
1. Convert MP4 to GIF or Image Sequence
- Use an online tool like Ezgif, CloudConvert, or Adobe After Effects to convert your MP4 file to a GIF or image sequence (PNG/JPG frames).
- If using After Effects, import the MP4, then export it as a PNG sequence.
2. Convert GIF or Images to Lottie (JSON)
- Open Adobe After Effects and import your GIF or image sequence.
- Use the Bodymovin plugin (free LottieFiles extension) to export the animation as a Lottie JSON file.
- If using LottieFiles.com, upload your GIF and let it generate a Lottie animation.
3. Upload Lottie File to Webflow
- Go to Webflow Designer and add a Lottie element.
- Upload your Lottie JSON file from Step 2.
- Adjust playback settings as needed (autoplay, loop, on-scroll animations).
Summary
Webflow does not support direct MP4 to Lottie conversion. Instead, convert MP4 to GIF or an image sequence, then use After Effects + Bodymovin or LottieFiles.com to generate a JSON-based Lottie file. Finally, upload it to Webflow using the Lottie element.