gandarufuuu

Okay, I think I figured it out. I had the ref below the scrolltriger element. If I put it higher up in the DOM, it works. In case anyone has the same problem, I'll just leave this topic. In my case, ".quotecontainer" is the scrolltrigger, so I had to put the ref higher than that.

Hi all, I'm trying to apply an animation to a certain scope only, using useGSAPs scope option. The weird thing is, on my local react project it only works, if I add ".current" in {scope: ref.current}. Then, however, it also affects elements outside of the scope. If I only write {scope: ref}, the elements outside the scope aren't affected, but neither are the ones inside the scope. I tried recreating the issue in this stackblitz, but here's it's working as intended 🤯😩 https://stackblitz.com/edit/react-avrbpg?file=src%2FApp.js Any idea, what I could be doing wrong locally? I checked a million times that the ref is on the right div...

Thank you Jack and Rodrigo, I'm constantly learning new things and appreciate your well-founded answer a lot. I had no idea about the useGSAP hook, and had my way of doing things from a tutorial on the web. Your demo was super helpful, Rodrigo!

Thank you for your reply. I didn't provide a demo since I felt my problem was more of a general nature vs a project specific problem. Your code worked indeed. I'm not sure if I need a cleanup, if I implement it like this useEffect(() => { ScrollTrigger.create({ trigger: '#footer', onToggle: (self) => setHitBottom(self.isActive) }); }, [setHitBottom]);

Hi all, I'm new to GSAP and trying to wrap my head around the following problem: In react I have a state variable const [hitBottom, setHitBottom] = useState({ value: false }); I'm trying to figure out how to setup a scroll trigger and set that boolean to true, once the footer at the bottom of the page is in view, and reverse it to false once it leaves the viewport. I cannot find anything on how to change state variables in the docs and would appreciate a nudge in the right direction. Thank you! Here's what I tried doing: useEffect(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: '#footer' } }); tl.fromTo( setHitBottom, { value: false }, { value: true } ).reverse(); }, []);