Using Lottie actions in Interactions with GSAP

Updated

Learn how to use Lottie actions in Interactions with GSAP.

The Lottie action in Interactions lets you animate Lottie files with GSAP powering the playback behind the scenes.

Overview

The Lottie action allows you to:

  • Target any .json or .lottie animation on the canvas
  • Control playback using duration, start/end frames, easing, and repeat behaviors
  • Combine Lottie with any other GSAP-powered actions
  • Override default playback behavior while still respecting the animation’s native frame rate

How to add and modify a Lottie action

  1. Select the element that will trigger your interaction (e.g., a section or button)
  2. Create or open an interaction tied to that trigger
  3. Add a new Lottie action from the Add action menu
  4. Choose a Lottie file
  5. Click the animation you want to control

Then you can change the start time, duration, easing, start and end frames, and repeat settings to match your desired outcome.

Note

Webflow automatically reads the animation’s native duration and frame count directly from the Lottie file so you always start with correct, smooth baseline playback.

You can override the duration at any time. For example, changing a 2-second Lottie to 5 seconds slows playback proportionally.

When you modify the frame range, Webflow resets the duration to match the animation’s original frame rate. You can override this value by changing the duration manually.

Related articles