Chapter 175: Hook a Lottie Animation to ScrollTrigger (Helper)

Core Idea

A helper that connects a Lottie (After Effects export) animation's playhead to scroll position, so the animation scrubs forward/backward as the user scrolls, similar to the canvas image-sequence helper but for Lottie's own renderer.

Key Concepts

• Loads the Lottie animation via lottie.loadAnimation() with autoplay: false, then tweens a {frame: 0} object up to totalFrames - 1 with a ScrollTrigger attached (scrub, pin: true by default).
• Accepts a speed shorthand ("slow" | "medium" | "fast") that maps to preset scroll distances, or any custom ScrollTrigger property can override defaults via the same vars object.
• Uses gsap.context() internally for cleanup-friendliness in component frameworks.

Code Examples

LottieScrollTrigger({
  target: "#animation-container",
  path: "data.json",
  speed: "medium",
});

• What it demonstrates: a single call wiring a Lottie JSON animation to scroll, without hand-writing the ScrollTrigger/tween glue code each time.

Key Takeaways

1. Requires the separate lottie-web library to be loaded, in addition to GSAP + ScrollTrigger.
2. Any vars property is passed through to override the generated ScrollTrigger config.

Connects To

• ScrollTrigger (scrub, pin): the driving mechanism.
• Scrub through a canvas image sequence: the equivalent pattern for a plain image sequence instead of Lottie.