Animating Flexbox Order Transition with GSAP FLIP

[stoesselleon]

Hello,
I've searched this forum and have not yet found a real solution to what I am trying to do. It seems to be quit easy, but i always end up tangeled in the details.

What I am trying to do:

• I have a flexbox layout with 3 items (first, second, third)
• I want to Animate their flex order with a Transition -> Decision for GSAP Flip
• First Step would be to move the second item to third place
• Second Step (after a delay) would be to move first item to second place
• This would end up with the third item in the first position (that is the goal)
• It's important, that this happens in these 2 Phases

I have attached a minimal Demo. Unfortunately i'm a GSAP beginner so i have trouble figuring out my mistake. The end result of the animation is correct, but the starting points for the boxes does not look like what it should. Help here would be greatly appreciated. I think i might mess up the correct state collection or that this is not possible at all with GSAP Flip. In this thread I've read that it's not possible to animate flip with multiple phases. That's why i ended up choosing to move the other boxes (2 different elements down) instead of moving 1 element up twice. But I guess there might be the error, because both FLIP Timelines seem to be interpolating with each other...

Best regards!

See the Pen VwNxvVE by cf-ls (@cf-ls) on CodePen

[Sahil]

I think this is what you are trying to achieve, check comments for explanation.

See the Pen xxejZqy by SahilAFX (@SahilAFX) on CodePen

[stoesselleon]

8 minutes ago, Sahil said:

I think this is what you are trying to achieve, check comments for explanation.
 

 

Thank you @Sahil! This was exactly what i was going for.