j&o

hey Jack & Zach, Thanks for the assistance. Yep, I assumed that ScrollTrigger.getAll() would kill everything including ScrollTrigger.matchMedia() so I misunderstood the purpose of .kill(); thanks for clearing that up A boolean flag works just fine on unmount, along with killing all the individual ScrollTriggers with a loop over ScrollTrigger.getAll() just like in your example. appreciate the clarification and thanks again for your time!

I am registering it correctly I'll whip up a pen as soon as i can tomorrow. Let me know if I can send you a link in the meantime? it's as minimal an example as you could imagine - its the "hello world" of matchMedia

I am registering it at the _app level (its a next.js app). I can't really post it here but I can send you a link to a simple demo and the source repo as a DM? I would of course post any solution as a result back into the forum.

Hey there Zach, if i attempt to kill with ScrollTrigger.kill() on unmount, I get the following ts error: The 'this' context of type 'ScrollTrigger' is not assignable to method's 'this' of type 'PluginScope'. Type 'ScrollTrigger' is missing the following properties from type 'PluginScope': _props, _pt, add Is there a different way I should be calling this other than one of these methods?: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; useEffect(() => { // call function to setup ScrollTigger; return () => { ScrollTrigger.getAll().forEach(t => t.kill()); // no error but media query events still fire after unmount ScrollTrigger.kill(); // error, resize mq events still fire on unmount specificTimelineName.kill(); // no error but events still fire on unmount } }, []);

thanks for the reply Zach It's a kind of difficult issue to do a codepen for as it is on unmount after a route change. I can probably whip up something if its unclear as to what I mean but basically using any of the .kill() methods mentioned - and ScrollTrigger.kill() - doesn't remove ScrollTrigger -- the events are still firing on resize at the defined media queries (in the code posted, <720 & >720) even though that component is unmounted and I have attempted to kill the instance in the ways I have outlined above. I can send you a DM to a demo if that would help? Thanks again for getting back to me, I appreciate it!

Hi there, I am using ScrollTrigger a lot, its a fantastic addition! the only issue I've run into so far is cleaning up when using ScrollTrigger.matchMedia() when un-mounting in my React components. I've tried killing all ScrollTrigger instances, and killing timelines individually. simplified setup below: const buildTimeline = () => { // ... setup stuff ScrollTrigger.saveStyles([boxRef.current, mobileRef.current]); ScrollTrigger.matchMedia({ '(min-width: 720px)': () => { if (!boxRef.current) { console.log('boxRef does not exist'); } ScrollTrigger.create({ // config stuff animation: desktopTimeline.current .to( // animations ) }); }, '(max-width: 719px)': () => { if (!mobileRef.current) { console.log('mobileRef does not exist'); } ScrollTrigger.create({ // config stuff animation: mobileTimeline.current .to( // animations ) }); }, }); } useEffect(() => { if (!hasMounted.current) { hasMounted.current = true; buildTimeline(); } return () => { // kill all ScrollTrigger[s] ScrollTrigger.getAll().forEach(t => t.kill()); // try killing individual timelines also mobileTimeline.current.kill(); desktopTimeline.current.kill(); } }, []); This would normally work ok on ScrollTrigger instances generally - or at least it seems to! - but if I'm using matchMedia I'll still get media query change events firing where the component is unmounted (i.e. navigating to a different route). any idea what I'm missing here?

Thank you Zach, should've read the release notes more carefully ?. I'll have a go with type: x

Hi there, Can't seem to be able to get "scroll" / or "scrollLeft" types to work with Draggable in v3 (other options seem to work just fine). Any ideas about what might be wrong with my pen?