Implementing Scroll-Controlled Animation with Lottie and GSAP

[VishnuNaatha]

Hello GSAP,

I'm working on implementing an animation using Lottie and GSAP within an Astro project. My goal is to have the animation play on scroll, where the scroll controls the animation progress. However, when the animation reaches approximately 30 frames, I want the animation to not be scrubbed but it should play on on it's own and when it ends it should loop only the latter half of the animation.
 

Could you please provide guidance on how to achieve this functionality using GSAP and Lottie within an Astro project?

Here is a sandbox link to what I have tried till now:
https://codesandbox.io/p/devbox/animation-85thrt

[Rodrigo]

Hi @VishnuNaatha and welcome to the GSAP Forums!

 

The latest version of the Lottie helper function has an endFrameOffset property that allows you to tell ScrollTrigger the last frame it should scrub the lottie to, then you can use an onLeave callback to play the lottie animation:

const animation = LottieScrollTrigger({
  target: container,
  path: "src/assets/Home_Hero.json",
  speed: "medium",
  scrub: 1, // seconds it takes for the playhead to "catch up"
  endFrameOffset: 100,
  onLeave: () => {
    gsap.delayedCall(1, () => animation.play());
  },
});

You have to add that delayed call there in order to accommodate for the scrub time. Keep in mind that the helper function is calling lottie's goToAndStop on every update, so if you have any scrub that is not true, you have to wait until the lottie helper is completed in order to play the animation, otherwise it will be stopped.

 

https://gsap.com/docs/v3/HelperFunctions/helpers/LottieScrollTrigger

 

Here is a fork of your demo:
https://codesandbox.io/p/devbox/animation-forked-fs69y4?file=%2Fsrc%2Futility%2FheroAnimation.js%3A65%2C1-75%2C4

 

Hopefully this helps.

Happy Tweening!