How to Use Lottie on Webflow
22 Mar 2021

How to Use Lottie on Webflow

This article will introduce the fundamentals you need to implement Lottie animations on Webflow.

If you have no idea what Lottie is, it is a library that renders Adobe After Effects animations natively on mobile and the web. To learn more, you could check out the other articles on this blog but I’d recommend starting with this.

That aside, Webflow is a website building and hosting software as a service that helps anyone with little to no prior experience build and publish a website. This article is going to explain how to implement Lottie animations on websites built on Webflow.

Get JSON File

First off, you would need a JSON file containing the After Effects animation. If you are not familiar with using After Effects, you can get free JSON files of animations from our library or anywhere else on the Internet. If you use After Effects, you would need to export the animation to a JSON format with the bodymovin extension.

Implement Animation on Webflow

After you have gotten the JSON file, in your Webflow Designer, you would need to do a couple of things:

  1. Create container for animation
  2. Drag and drop JSON file into the container
  3. Set the animation trigger

Create Container for Animation

Create a container where you want the animation to be. The animation is going to take up all the space in the container so you should be mindful of the width and height of the container.

Drag and Drop the JSON File into the Container

This part is quite self-explanatory. After you drop the file into the container, the first frame of the animation appears in the container and a little “settings” window appears.

This window contains some basic settings that you can alter to modify the animation. Here, you can pick your preferred renderer, preview the animation and set a different duration for the animation.

Set the Animation Trigger

More often than not, you’d want the animation to play when the user scrolls on the page or clicks a particular element. To implement these types of triggers, you navigate to the Interaction tab on your Designer (or press H).

To apply triggers that would be specific to the element, you click the plus icon beside the ‘Element trigger’ text. A dropdown of options will appear and you would have to select the action that should trigger the animation. The options include the following:

  • Mouse click
  • Mouse hover
  • Mouse move over element
  • Scroll into view
  • While scrolling in view

For each of these options, you can set the Lottie playback to play on the initial interaction and then play the reverse on the second interaction.

To apply triggers that will be dependent on the displayed viewport or page state, you can check out the ‘Page trigger’ options. The same steps apply to those as well. To learn more, you can check out
Webflow’s course on After Effects and Lottie.


Thank you for reading and happy animating!