I'm pretty new to GSAP but really love it so far and was able to make some cool animations with it!
Now I'm facing something I can't grasp on how to build yet and would appreciate any help with that to guide me on the right path.
I try to explain what I want to do:
I have a "container" div in which I have several "slide" divs. Each of the "slide" divs contain three texts (small headline, big headline and description).
When the main "container" comes into view (with ScrollTrigger) and has come to the middle of the screen (based on its height), I'd like the first "slide" div to show up.
But it shouldn't just show up or fade in. As I keep scrolling, the "bigHeadline" should appear in 400px font-size (fade In), when I continue scrolling it should scale down until it reaches the position in my CodePen. As soon as it reaches that position / size, it stays like that. When I continue scrolling, the "smallHeadline" and "description" show up. They both can Fade In or whatever. After everything is visible, and I keep scrolling, I want it to stay on the screen for a few seconds / frames and then fade out. When I then continue scrolling, it should do the same with the next available "slide" div.
Once it reaches the last "slide" div and played the animation for it, it shouldn't do anything else. If I scroll up from that position, everything should reverse.
I hope I was able to explain it as simple as possible. I've attached a CodePen, so you can better see the structure.
The main problem is, that I don't know where to start or how to assemble this. I'd start with building the animation for each element with a ScrollTrigger and scrub, I guess? But how do I "chain" all the other "slide" divs to that?
Edit: I'm also using your SmoothScroll function on the page if that is maybe important to know.
Really appreciate any help with this.
Thanks a lot.