XXVII

Thank you Jack, your message has pointed me in the right direction. Also, the thread shared by Rodrigo let me know about gsap.context(), which I used to organize my code more efficiently. Now my code looks like this, and it works: export let gsapContext = gsap.context(() => {}); export let gsapMatchmedia; /* here I import some other files which add more animations and use the gsapContext and gsapMatchmedia variables created above */ if (/*conditions are met*/) { gsapContext.add(() => { gsapMatchmedia = gsap.matchMedia(); gsapMatchmedia.add({ isDesktop: '(min-width: 992px)', isMobile: '(max-width: 767.98px)' }, (context) => { // some scrollTriggers here }); }); } /* "willReplaceContent" triggers when a link to another page is clicked, right before the content of the current page is replaced with the new one */ swup.on('willReplaceContent', killGsapAnimations); // kill all scrollTriggers and matchMedias defined here and in other files function killGsapAnimations() { if (typeof gsapContext !== 'undefined') { gsapContext.revert(); } if (typeof gsapMatchmedia !== 'undefined') { gsapMatchmedia.revert(); } }

I don't know if you are familiar with Swup, I quote the website "Swup is an extensible and easy-to-use page transition library for server-side rendered websites. It handles the complete lifecycle of a page visit by intercepting link clicks, loading the new page in the background, replacing the content and transitioning between the old and the new page." This means that if I define some scrolltriggers (indipendently or inside gsap.matchMedia()), when I click to go to another page, those "entities" are not destroyed by the reloading of the page, because there's no reloading between pages. So I have to kill everything I initialized in the old page and initialize what I need in the new page, using the events provided by Swup: https://swup.js.org/getting-started/reloading-javascript/ What happened to me is that I easily killed the scrolltriggers using ScrollTrigger.getAll(), but the scrolltriggers created inside gsap.matchMedia() were being recreated when the mediaquery matched, even if they were killed before. My code (which is called every time a new page "loads") was something like this: let mm = gsap.matchMedia(); if ("some conditions are met") { mm.add({ isDesktop: '(min-width: 992px)', isMobile: '(max-width: 767.98px)' }, (context) => { let {isDesktop, isMobile} = context.conditions; // create scrolltriggers }); } else { mm.revert(); } When the conditions were not met, mm.revert(); was called but the scrolltriggers were recreated on resize anyway. This is what I don't understand: mm.revert() was called but the "old" mm somehow survived. I solved my problem like this: let mm = gsap.matchMedia(); mm.add({ isDesktop: '(min-width: 992px)', isMobile: '(max-width: 767.98px)' }, (context) => { if ("some conditions are met") { let {isDesktop, isMobile} = context.conditions; // create scrolltriggers else { mm.revert(); } }); } I don't know if this is the right strategy, but I moved the "if" inside the context. Now it works but I don't know why

Hi Cassie, thank you. Yes, eventually I changed some conditional logic and used mm.revert(); in the right place if some conditions are not met. Nevertheless, is there a way to collect all instances of gsap.matchMedia and revert them, in a similar fashion to what we do with ScrollTrigger.getAll()?

I have the same problem with Swup instead of React. Since ScrollTrigger.clearMatchMedia() is deprecated, what can I use to remove all instances of gsap.matchMedia()? Now I'm using gsap.matchMediaRefresh(); and although I kill all scrolltriggers, when gsap.matchMedia is matching, all scrolltriggers defined inside it are being regenerated. It seems that gsap.matchMediaRefresh(); doesn't kill the instances of gsap.matchMedia(), I probably misunderstood its function. Using Swup I can't rely on page reloading to reinitialize all js, so I have to "reset" manually the state of the page killing all scrolltriggers AND matchMedias

Oh, wow, thank you! I was an equal sign from the solution! ? PS: I didn't include a demo because I guessed the problem was very banal, but I will consider it next time.

Hello, I'm trying to start the trigger 100px before the top of element reaches the center of the viewport and stop the trigger 100px after the bottom of the element reaches the center of the viewport. I succeded at starting 100px before, but I can't figure out how to end 100px after, this is the first thing I tried: scrollTrigger: { start: '-100px center', end: '+100px center', trigger: element, toggleClass: 'class' } Other attempts: "bottom +100px center" "100% +100px center" "+=100px center" Any suggestion? Thank you