Scrub Animations using ScrollTrigger on a timeline

[DannyA12]

Hello!

 

There's probably a very simple solution to this, but how can I pin/unpin a background (or section) while animating an element using ScrollTrigger? I want the scrollbar to act like a scrubber for the element that is being animated (using a timeline with multiple tweens) and then have the background unpinned as soon as the element is done animating.

 

I have set the background and element as values to the trigger and the endTrigger, respectively, with the proper start/end values, but as soon as I add a second tween to the timeline, the scrollbar stops scrubbing with the animation.

 

Thank you so much!

[ZachSaucier]

Hey Danny and welcome to the GreenSock forums.

 

It's hard to say given the lack of code or a demo. My guess is that you have a timeline with a tween and you're applying a ScrollTrigger to that tween? Like this?

gsap.timeline()
  .to('.foo', {
    scrollTrigger: {
      ...
    }
  })

If so, don't do that  It doesn't make much sense. Instead, you should apply the ScrollTrigger to the timeline itself in most cases.

 

See this post for how to create a minimal demo:

 

[DannyA12]

Hi Zach,

 

Thanks for the quick response.

 

Here's a minimal CodePen demo.

 

See the Pen eYZJJZK by USCDanny12 (@USCDanny12) on CodePen

 

When building out the demo, I realized that my endTrigger was incorrect. Now the scrollbar is linked to the animation (very embarrassing). If the syntax looks off, I'm more than happy to update anything.

 

In any case, thank you for your help and fast response.

[ZachSaucier]

That's one of the many benefits of making a minimal demo! 

 

Good work figuring it out