Scroll Trigger animate in sticky items with coordinating text.

[gmkan12]

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:

1. 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. 
2. Make text visible on scroll reverse/back up.
3. 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! 😀

See the Pen WNjBqpX by gmkan (@gmkan) on CodePen

[GreenSock]

It looks like you were using the position parameter incorrectly. For example, 

// both of these are placed at the same spot, so you're animating the same element to two totally different values at the same time
.to(".text p", {opacity:1}, 1)
.to(".text p", {opacity:0}, 1) 

I'd recommend reading about the position parameter - it's very powerful. 

 

To make things stay on the screen longer with a scrub animation, you'd need to use the position parameter to create space in the timeline appropriately. If your animations are all back-to-back, there's no time for things to stay on-screen. I forked your demo and created things more the way I'd personally approach it where I just use classes and a loop so that I can simply add more elements and they'll automatically get animated appropriately: 

See the Pen BaRgjJG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps!

[gmkan12]

Okay, I'll check these out. Thank you very much for your help! 😀