Restarting Timeline with ScrollTrigger

[hamsa@thoughtput.in]

Hi folks!

 

Been using ScrollTrigger since last week, and amazed at the power and flexibility it yields! Working with it super fun! 😄

 

I've run into a particular issue while trying to implement a conditional show/hide of two objects within the same timeline. As demo'ed in the CodePen, I have two bars that grows together while scrolling, with button toggles to show/hide only one of them at a time. Ideally, when I toggle, I want to restart the timeline so that the visible bar animates to the height per the current scroll position. I've tried to use the Timeline Restart function, which even though does restart the animation correctly, seems to go ahead and kill the ScrollTrigger (or rather override it partially); it does not listen to the scroll position anymore and just goes ahead and completes the animation on its own. I tried including ScrollTrigger.refresh() but that doesn't change anything either. Is there a workaround to this, or am I doing something wrong?

 

Thanks in advance!

See the Pen OJMYjep by ashwinuae (@ashwinuae) on CodePen

[ZachSaucier]

Hey Hamsa and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

The issue here is logical: When a user clicks the button you're telling the timeline to both play all the way through (with the .restart()) and be controlled by the scroll position. Those two things are not compatible. 

 

As such, you'll have to use some method to disable the ScrollTrigger while the animation is replaying and also animate the progress of the timeline to the progress of the timeline when the button is clicked. I'd set it up along the lines of this:

See the Pen VweOyEw?editors=0010 by GreenSock (@GreenSock) on CodePen

[hamsa@thoughtput.in]

Ah that makes sense, didn't know about the incompatibility bit, quite new with both GreenSock & JS here. 🙂

 

Thank you for the assist Zach, and glad to be a Club GS member; it's definitely worth it!

 

Cheers!