Animating each elements of an array one after the other

[Pollux Septimus]

Hello, 

 

I am trying to build a somewhat of a carousel using gsap and I encounter a problem. I can't animate multiple elements one by one and one after each other using pin and scrub. (I have also tried batch) I have tried multiple ways cut I need some help. In the codepen I left the most "stable" version I could get. 

 

To be more specific what I was trying to achieve is a pinned section, that would run through each img (box) and then continue scrolling as normal. Each box would appear from the bottom from opacity 0, they would stop at the top of the container with opacity 1 and disappear to opacity 0 while the next one takes it's place.

See the Pen rNdLomM by raul-rogojan (@raul-rogojan) on CodePen

[GreenSock]

I'm not entirely sure what you're looking for. I read your description a few times and I'm still kinda lost, but maybe one of these demos will help serve as a jumping-off point: 

 

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

See the Pen zYRmbEM by GreenSock (@GreenSock) on CodePen

See the Pen bGRdvMy by GreenSock (@GreenSock) on CodePen

 

Here are some collections:

https://codepen.io/collection/AEbkkJ?cursor=ZD0wJm89MCZwPTEmdj00

https://greensock.com/st-demos 

 

It looks like you're using a display: flex container, right? That may be part of the issue because when you pin something, by default it adds pinSpacing to push things below it on the page down further to make room for the pinning, but display: flex completely changes the way the browser handles spacing. But again, I'm really not sure what you're looking for or what the specific problems are that you're facing. If you still need help after looking at the demos above, please just provide more details about exactly what you want to happen and what isn't happening in your minimal demo. We're happy to answer any GSAP-specific questions, but please keep in mind that these forums aren't intended to be "here is my list of requirements...please make it work for me" kinda thing (see the forum guidelines). Again, we love helping with GSAP-specific questions, though. 

[Pollux Septimus]

@GreenSock  Hi, thank you for you examples. it helped me figure it out how to build what I wanted. 

You can take a look if you want. 

See the Pen rNdLomM?editors=0010 by raul-rogojan (@raul-rogojan) on CodePen