Make flip animation work in the same div in both directions

[eightarmshq]

I have an image that flips from one div to the other. When the animation happens one way, it:

1. Is appended to the target div
2. transforms really nicely over to it

The other way, it:

1. Is appended to the previous div (which has overflow hidden on it)
2. transforms over to it, except it is hidden by the overflow.

Is there a way I can make it work that both animations happen in the overflow: visible div?

See the Pen OJEWOpe?editors=0010 by EightArmsHQ (@EightArmsHQ) on CodePen

[mvaneijgen]

Add absolute: true to Flip animation 

 

Boolean | String | Array | NodeList | Element - specifies which of the targets should have position: absolute applied during the course of the FLIP animation. If true, all of the targets are affected, or use selector text like ".box" (or an Array/NodeList of Elements, or even a single Element) to specify a subset of the targets. This can solve layout challenges with flex and grid layouts, for example. If things aren't behaving in a seamless way, try setting absolute: true. Beware, that position: absolute removes the elements from document flow, so things below can collapse. In that case, just define a subset that doesn't include the container element so it props the layout open. (added in 3.9.0)

 

See the docs for more info https://greensock.com/docs/v3/Plugins/Flip/

 

See the Pen dyKNJVy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening!