Hello!
I'm pretty new to GSAP and have been experimenting with Scroll Trigger. Basically, I want to make a section for a site where image files animate in, stick, and then specific text fades in along with each image file. For example, kind of like this shoe example but text appears as each shoe part fades in or animates up. The shoe itself would remain sticky within a container until everything was finished animating in. in. https://codepen.io/GreenSock/pen/gOabMXv
Issues I'm having so far:
How do I make the duration of the text full opacity last longer through more scrolling? I tried with adding a duration but then the elements after would overlap. I want to elements animating in after to do so once the duration is over.
Make text visible on scroll reverse/back up.
Ideally in a next step, I'd like to make them float up with scroll to position but know I have to put in some CSS to position them first offscreen.
I'm thinking maybe alternatively making the overall container sticky and making each element it's own trigger rather that the main container.
Thank you for any help or input in advance! ?
