gsapnooby Posted December 26, 2023 Share Posted December 26, 2023 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 ()=>{ } }) Link to comment Share on other sites More sharing options...
Toso Posted December 26, 2023 Share Posted December 26, 2023 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 Link to comment Share on other sites More sharing options...
Solution gsapnooby Posted December 26, 2023 Author Solution Share Posted December 26, 2023 This has been resolved. I had to just remove mm.revert() to make it work. Link to comment Share on other sites More sharing options...
Toso Posted December 26, 2023 Share Posted December 26, 2023 happy to hear that, but there is no mm.revert() in the code 🤔 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