How to animate items on top of each other making sure the next item always appears above the previous one

[GilesP]

Hi all

 

I've got a little animation with images sliding in and out one after another. What I'm trying to figure out is how I can have the next image always slide up above the previous one (see the transition between the 3rd image back to the 1st image)? I've tried animating the z-index but that seems to result in it sort of just magically disappearing halfway through the transition. Any other way to change the stacking context I should be animating?

See the Pen poLOrbe by gpartington (@gpartington) on CodePen

[GreenSock]

You could just set the zIndex in an onRepeat in the stagger: 

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

 

There are a bunch of ways to do it actually. That's just one that came to mind quickly. You could also use a recursive function that just does one transition at a time and in the onComplete, calls itself again. And you could set the zIndex in that function before you do the transition. Whatever seems more intuitive to your brain.

 

Thanks for being a Club GreenSock member! 🥳

[GilesP]

Thanks Jack! Adding it via callback inside the stagger makes a lot of sense.