FLIP and z-index

[celli]

On the codePen only the second image from the top in the first column will click. I have two small issues that I am trying to wrap my head around:

 

1. when the full size element is clicked to return to it's thumbnail state, I can't seem to get the z-index to have an effect on top of my other flex columns

2. when the full size element is clicked it removes the thumbnail (while it is flipping) and then returns it to the document flow when the Flip ends and you can see the column items jump when it removes and then adds the element back

 

These are probably simple mistakes on my part with using Flip, but I can't seem to figure out exactly how fix them

 

See the Pen GROqaWb by celli (@celli) on CodePen

[GreenSock]

I assume this is more like what you were looking for? 

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

[celli]

Hi Jack,

 

Yes that's exactly what I was trying to achieve, amazing.

 

Is there a reason I would use Flip.from on the first Flip and the Flip.fit to return it ? I see why it works, and your example is perfect, I am just trying to wrap my head around use cases. I was able to get it pretty close by using Flip.from on both, but not able to truly pull it off correctly without using Flip.fit to return the element back to it's original location correctly, so more understanding of that is really helpful for future use of GSAP Flip.

 

 

 

[GreenSock]

The main reason I used Flip.fit() on the second one is because:

1. You actually have BOTH images visible at the same time, so you're not really flipping the thumbnail one "from" the fullSize one. You're making the fullSize one move to fit on top of the other one (and then disappear so it appears seamless). So intuitively, it just made sense in my head to animate it there and then in an onComplete remove the styling and set display: none. 
2. In terms of stacking, the fullSize one is already on top of everything else so if we animate that we don't have to worry about all the other stuff that's overlapping the thumbnail if it was placed where the fullSize one is at that time. 

We probably could get things working with a Flip.from() with enough elbow grease, but I just didn't see any good reason to force that. It would make sense if you were actually taking the same element and making it fullSize, but you're not - you've got a completely different element and you're wanting BOTH of them to remain visible the entire time so it's not the typical "FLIP" animation. But of course we can still leverage all the sweetness in Flip plugin to accomplish our goals

 

Does that help? 

[celli]

yes Jack, Thank you for the thoughtful explanation!