Scrolltrgger Animate, then scrub within same timeline

[Stefanp]

Hi all,

 

New here and I've absolutely loving Gsap and the scrolltrigger plugIn. 

 

However I'm struggling to combine a regular animation followed by a scrubbed animation in the same timeline, pinned to the same trigger. 

The desired outcome is to scrub the red square to the right, after the (non scrubbed) orange square animation is finished. 

 

I'm unsure what the 'start' value should be. 

 

I tried:

start: () => tl.scrollTrigger.end, // function-based value

But that didn't work...

 

Can anyone tell me what I'm missing? Thank you!

 

See the Pen QWxPbQz by stefanpullen (@stefanpullen) on CodePen

[GreenSock]

I have a feeling I may be misunderstanding your goal, but wouldn't it be logically impossible to have a scrubbed animation [only] a non-scrubbed one? 

 

Like...imagine that you scroll down 100px and it triggers the non-scrubbed animation which takes 2 seconds to finish but during that 2 seconds the user scrolls down really fast (maybe all the way to the end of the page). Now what? How could you have the other animation only scrub at that point? Would it have to dynamically add extra space to the bottom so the scrollbar position would jump with the new room? If not, it'd be impossible to scroll down further. See the logic issue? 

 

You definitely made one of the common mistakes - you nested a ScrollTrigger inside a timeline that has a ScrollTrigger. That's logically impossible to have the playhead controlled by BOTH the parent timeline AND the scrollbar position. So you should definitely remove that nested ScrollTrigger. 

 

Here's a dynamic solution that just drops it into place when the animation is done: 

See the Pen eYKoWNX by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

[Stefanp]

Thanks for fixing the codepen and clearing things up!

I see where you're getting at with the logic issue. My first thought would be to disable scrolling until the animation has finished. 

Need to fiddle around a bit to see if I can make it work...

 

Thanks again for the help

 

 

[GreenSock]

12 hours ago, Stefanp said:

My first thought would be to disable scrolling until the animation has finished. 

As a user, I absolutely HATE when sites do that. The user can see the scrollbar...but the site seems "broken" when it refuses to allow them to scroll down (dragging the scrollbar or using their mouse wheel, etc.)

 

12 hours ago, Stefanp said:

Thanks for fixing the codepen and clearing things up!

No problem! Happy to help. 👍

 

Enjoy the tools.