GregQP

Hi. I would appreciate it if you could take the time to understand my question fully. The timeout is intentional as it demonstrates that when a ScrollTriggers is instantiated due to the state change of a parent component the newly instantiated ScrollTriggers fire on leave events without any user interaction. In order to see this go to the stack blitz demo, open the console, scroll and the see the onleave events fire without any interaction. it doesn’t grow exponentially. The ScrollTriggers are unmounted and rectreated but it always only 5. I would like to know why the onleave events fire without any user interaction.

The name onLeave implies the trigger is leaving the trigger zone not that it is outside. If I instantiated five scroll triggers four of which were outside the viewport you’re saying four onLeave events firing makes sense? If the code is firing events that should be triggered by user interaction on instantiation then that’s a bug. If that’s not the case then the name of the onleave callback should be something that reflects its purpose accurately. I’ll look at clamp. Thanks for the tip.

If you look at the StackBlitz I created you can see that instances of ScrollTrigger are firing their onleave event on instantiation. But as they haven’t been scrolled they shouldn’t fire an onleave event A react hook abstracts logic to make it reusable. ueaGSAP is the same. The hook I created does the same except it also contains tweens and attaches the timeline for those tweens to a ScrollTrigger that then uses a master div as its scroller. It’s how I designed it based on other answers in this forum. With the hook I can just pass a ref in from amy component and have it animate. If I just used useGSAP I’d write a lot more code. Which is the cornerstone of react.. reusable functions that save you repeating yourself yourself

https://stackblitz.com/edit/react-gz37v5?file=src%2FApp.jsx Here's a minimal rep showing th issue

Each time a page changes in the app a new scrolltrigger is created and its trigger is a div that I already instantiated. I'm finding that during these re-renders the scroll-trigger callbacks are firing with self.progress = 1. As a result I'm only firing callbacks when self.progress is between 0.1 and 0.9. This works ok but means tweens don't finish before the callback fires and the instance is destroyed. So it's jerky. What's the best solution to not having callbacks fire when scrolltrigger is going to the create/destroy cycle that React likes to do? Here's a stackblitz that shows what I'm encountering. Open the console, scroll the app to trigger an onLeave event and they keep on firing as new scrolltriggers are created. https://stackblitz.com/edit/react-gz37v5?file=src%2FApp.jsx