trying to and scrolltrigger to gsap timeline
Hey everyone can anyone whose familiar with using gsap in react help me out here,I am trying to create a timeline that activates on scroll using scrolltrigger but I can't seem to get anything to work how I want it to ðŸ˜, please bare with me I'm sorta new to react .
I've tried adding it in useEffects and LayoutEffects but it's not doing what I want it to
Heres a link to the codepen ,someone take a look and tell me what I'm doing wrong
https://codepen.io/kalanzi/pen/OJaMjqx
3 Replies
I know pretty much nothing about GSAP, but I'll try to help! You have a
sections variable that seems to store elements from the DOM in an array. The problem with this is that, when your page first loads and section gets assigned a value, React hasn't actually populated the DOM yet, so there aren't any elements with the class name .project__wrapper to target. To fix this, I would place the sections variable inside of the useLayoutEffect hook, right at the top. Not sure what it's supposed to look like, since again I have no clue about GSAP stuff, but this seems to get the scroll effects to run!
https://codepen.io/Therason/pen/RwqazNQ(I also don't really know React best practices, so while this works there may be better ways of doing it. This was just the simplest approach for me!)
@rooook thank you very much for your input ,it has helped a ton