ScrollTrigger is not working inside the MatchMedia()

[gsapnooby]

   

Hello GSAPers, 

 

I have created a scrolltrigger which works fine but when I use it inside the matchmedia. It stops working. I have no idea what am I missing.  

 

 

 

// create
    let mm = gsap.matchMedia();

    const tl = gsap.timeline();
mm.add({
        isDesktop:`(min-width: ${2000}px) and (prefers-reduced-motion: no-preference)`,
        isLaptop:`(max-width: ${1920}px) and (prefers-reduced-motion: no-preference)`,
        isMobile:`(max-width: ${800}px) and (prefers-reduced-motion: no-preference)`,
    },(context)=>{
 
        function getHeight(opt:any){
            if(opt.isDesktop){
                return "70%";
            }else if(opt.isLaptop){
                return "90%";
            }else if(opt.isMobile){
                return "100%";
            }
        }  
       
        tl.to(".f-video",{
            width:"100%",
            height:getHeight(context.conditions),
            borderRadius:'1.5rem',
            scrollTrigger: {
                trigger: ".f-width",
                start: "center center",
                end: "=+50%",
                pin:true,
                scrub: true, // Smooth scrolling animation
                toggleActions: "play none none reverse",
                markers: false,
            },
        });

        return ()=>{

        }
    })

[Toso]

hi , it would be awesome if you could add a minimal demo since it is easier to debug but I can see a few things like

 

you are using context.conditions but can't see where you declared/destructured

like let { isDesktop, isMobile, reduceMotion } = context.conditions;

 

  here https://gsap.com/docs/v3/GSAP/gsap.matchMedia()#conditions-syntax----powerful-

 

 

also, you are using scrub and toggleActions together 

 

 

[gsapnooby]

This has been resolved. I had to just remove mm.revert() to make it work. 

[Toso]

happy to hear that, but there is no mm.revert() in the code 🤔