trusty97 Posted September 19, 2022 Share Posted September 19, 2022 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted September 19, 2022 Share Posted September 19, 2022 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!!! Link to comment Share on other sites More sharing options...
trusty97 Posted September 19, 2022 Author Share Posted September 19, 2022 Ah ok I was afraid that might be the case 🙂 but thank you for the quick response! Link to comment Share on other sites More sharing options...
trusty97 Posted September 23, 2022 Author Share Posted September 23, 2022 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted September 23, 2022 Share Posted September 23, 2022 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!!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now