Jump to content
GreenSock

GilesP

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

Recommended Posts

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

Link to comment
Share on other sites

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! 🥳

  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×