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
kalanzi mark
CodePen
scroll trigger with timeline
trying to animate timeline with scrolltrigger...
3 Replies
Rook
Rook•2y ago
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
tgb :)
CodePen
scroll trigger with timeline
trying to animate timeline with scrolltrigger...
Rook
Rook•2y ago
(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!)
kalanzi
kalanzi•17mo ago
@rooook thank you very much for your input ,it has helped a ton
Want results from more Discord servers?
Add your server