ScrollTrigger, toggleActions, and scrub not working as expected

[trusty97]

Hi there, 

 

I'm currently using ScrollTrigger with toggleActions to scrub an animation while it moves along the ScrollTrigger, and I'm using toggleActions to attempt to only have that animation play only when entering, and then reset and play again after you scroll up past the start again (onLeaveBack). The in-between states should simply show the completed animation state until you get back to onLeaveBack. 

 

I thought that this could be accomplished via toggleActions, but I'm noticing that if I use scrub the animation still scrubs back and forth, seemingly ignoring any options passed to toggleActions. 

 

I know I could do this manually using onUpdate to progress the item manually, but then I lose the ability to give scrub a value scrub: 3. Maybe I'm misunderstanding the toggleActions option? I'm attaching a very simple codepen to illustrate the issue.

See the Pen ExLmOwJ by pdnellius (@pdnellius) on CodePen

[Rodrigo]

Hi @trusty97,

 

Yeah, I'm afraid these features are mutually exclusive as far as I know. Toggle Actions basically controls a GSAP instance in terms of it's playback (play, pause, resume, reverse, restar, etc.) while Scrub ties the progress of the GSAP instance with the scroll position. I just can't think of a way to control the progress of a GSAP instance and have it playhead move forward at the same time.

 

I believe you'll have to choose between one of those features and see which one works the best in your case.

 

Happy Tweening!!!

[trusty97]

Ah ok I was afraid that might be the case 🙂 but thank you for the quick response!

[trusty97]

Thinking a little more on this... what if I used a piece of state to switch scrub: true to scrub: false using onLeave, then reset it to true onLeaveBack? Is there a way to make that work? 

 

See codepen for a modified example (that does not work): 

See the Pen ExLwewJ?editors=1111 by pdnellius (@pdnellius) on CodePen

[Rodrigo]

Scrub is not a config option that can be updated on the fly, sorry.

 

With the idea you have in mind, the only option would be to re-create the entire ScrollTrigger instance without scrubbing.

 

Finally in the hypothetical case that you could change the scrub value of a ScrollTrigger instance, changing that option using the onLeave and onLeaveBack callbacks, would have no effect whatsoever, since both callbacks are executed either when the animation associated to ScrollTrigger is finished forward or completely reversed back. The onLeave callback is triggered when the instance is is passed the end point of the config, at this point the animation's progress is 1. The onLeaveBack callback is triggered when the instance has passed the start point backwards, at this point the animation's progress is 0.

 

Hopefully it makes things clearer. If you have any other questions or issues, please don't hesitate to ask!

 

Happy Tweening!!!