Scroll Trigger for multiple animations in seperate page, NextJS 14

[Ganbatte]

Hello! I'm new to the world of GSAP, although I have experience with CSS. I'm using NextJS 14 in my project. I've watched quite a few videos from GSAP, but I haven't found any discussing clearing about using more than one scroll trigger on the page (not the same type of objects). Here is my problem: when I put it in a separate component and create the timeline in the main component, then pass it over, I can't properly use the scroll trigger. How can I use scroll triggers for multiple animations on one page? What am I doing wrong? The scroll trigger only work with my first animations.
I really want to get the hang of using GSAP, it seems like a great tool, but I just haven't quite gotten the hang of it yet. I would be extremely grateful for any help.
Thank you so much in advance.
here is the demo:https://stackblitz.com/edit/nextjs-wr4ktj?file=pages%2Findex.js,pages%2FHero.js,pages%2F_app.js

[Toso]

make sure to take a good look here, Passing a timeline prop  is already on the react-advanced page so maybe it will help you with next

 

 

https://gsap.com/resources/React/

https://gsap.com/resources/react-advanced

 

also, this guy creating some cool animations with GSAP with Nextjs

 

https://www.youtube.com/@olivierlarose1

[Rodrigo]

Hi @Ganbatte

 

Didn't you already created this thread with the exact same demo?

 

Please don't create duplicated threads as support is being given there. So please let's focus our efforts in that one.

 

Happy Tweening!

[Ganbatte]

Yes i did, sorry, I thought the other one was already inactive, please close this one. Thank you.