How to Convert Videos into Lottie Animations for Webflow

Step 1: Export Video Frames from Adobe Media Encoder

Start by breaking your video into individual image frames:

• Open Adobe Media Encoder
• Import your video file
• Set export settings:
  • Format: JPEG Sequence
  • Dimensions: Use Original
  • Frame Rate: Use Source
  • Quality: Maximum
• Export to a new folder

Step 2: Bring your new JPEG Sequence into After Effects

Now you'll turn those frames into a working animation:

• Create a new composition in After Effects:
  • Match your video’s resolution and frame rate
  • Set the desired duration
  • Use a transparent background (important for overlays)
• Import the JPEG sequence
• Add it to your composition as sequence layers

Step 3: Review and Tweak the Animation

Before exporting, ensure everything looks perfect:

• Make sure all frames are aligned
• Preview the playback smoothness
• Trim extra or blank frames
• Ensure your animation fits the composition bounds

Step 4: Export a Lottie File with Bodymovin

Use the Bodymovin plugin to export a Lottie-compatible file:

• Open the Bodymovin extension
• Adjust export settings:
  • Export Mode: Standard
  • Renderer: SVG
  • Enable compression
  • Check Preserve Alpha (for transparency)
  • Preview before exporting
• Export the final .json file

Step 5: Embed in Webflow

To use the animation on your Webflow site:

• Upload the Lottie JSON file to Webflow’s Assets panel
• Drag in a Lottie animation element
• Link it to your uploaded JSON
• Set behavior:
  • Autoplay and/or Loop
  • Adjust speed and triggering options

Performance Tips

Make sure your animations perform well:

• Keep JSON files under 500KB
• Test animations across multiple devices
• Use a CDN if hosting larger Lottie files externally
• Remove unused layers or effects in After Effects

Bonus: Lottie Optimization Tools

• Convert .mp4 to .webm using aconvert.com for smoother previews
• Optimize .json with:
  • LottieFiles Optimizer
  • dotLottie Converter

With these steps, you’ll be able to turn any video into a slick, web-optimized Lottie animation. Perfect for dynamic hero sections, icons, or interactive UI elements in Webflow!