Animation with Lottie & Webflow

Vector quality animations, that are both light and scale. This is a guide on using Lottie's Bodymovin inside of webflow, and the JS controls needed to manage certain uses.


What is Lottie?

Lottie is a fantastic way to add some extra wow to your web designs, or to help communicate complex messages without limiting creativity or your sites speed.

In this guide I will explain how to get started with lottie and how to you can add lottie to your own projects. I'll also show you some custom code that willget you started with simple JS controls.


What can this guide teach me!

This guide will get you started with the basics, like...

  • What is Lottie
  • Hosting a lottie json file
  • Implementing into into webflow projects
  • Controlling animation with JS controls
  • Use case examples (Hero Animation, Loader Animation, Hover Animation, Icon Animation)
Please Note: This is a legacy component, and was built prior to native lottie support.
Moving forward you should look to official webflow details around using lottie. Thanks for joining us in bringing lottie to webflow in the early days. Learn More