RADNM Posted April 4 Share Posted April 4 useGSAP(() => { const el = valueRef.current; const item1 = item1Ref.current; const item2 = item2Ref.current; const item3 = item3Ref.current; const mm=gsap.matchMedia(); const tl = gsap.timeline({ scrollTrigger: { trigger: el, start: "top 18%", end: "+=1500px", pin: true, markers: true, pinSpacing: true, onEnter: () => { console.log("Enter"); }, }, }); ScrollTrigger.create({ trigger: item1, start: "+=100px", end: "+=20px", scrub: 1, onToggle: self => { if (self.isActive) { setActiveIndex(0); } }, }); ScrollTrigger.create({ trigger: item2, start: "+=100px", end: "+=200px", scrub: 1, onToggle: self => { if (self.isActive) { setActiveIndex(1); } }, }); ScrollTrigger.create({ trigger: item3, start: "+=300px", end: "+=150px", scrub: 1, onToggle: self => { if (self.isActive) { setActiveIndex(2); } }, }); return () => { tl.set("body", { overflow: "auto" }); tl.kill(); }; }, {scope: valueRef}); Hey Guys can anyone tell me how to add match media where this should only work in screens larger than 768px I tried by inserting the code inside match media but didn't work and this is a react project. Thank you in advance Link to comment Share on other sites More sharing options...
Rodrigo Posted April 4 Share Posted April 4 Hi, When using useGSAP there is no need for manual cleanup, the hook does that for you, so you don't need to kill your timeline in the return statement. Setting the body element's style is OK though: https://gsap.com/resources/React Here is a simple demo showing how to implement GSAP MatchMedia in the useGSAP hook, as always just put your GSAP instances (including the MatchMedia one) inside the scope of the hook and everything should work: https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
RADNM Posted April 4 Author Share Posted April 4 Thank you I got the solution 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