Flip animation

[Kutalev]

Hello everyone!

Could you, please, help me with a flip animation.

I'm trying to transform a blue circle to a dynamic modal window appended to body. I guess what I made is ... a solution. But I'm sure there should be much cleaner and better way to do this)

 

Black squares are some elements with unknown z-index or in different DOM nodes.

See the Pen NWXaLRd by kutalev (@kutalev) on CodePen.

[OSUblake]

Hi Kutalev,

 

I wouldn't say there's a cleaner way. Appending an new element to the DOM is how most modals are done to make sure it is placed on top of everything. So I'm using from and to methods here. Just click anywhere.

 

See the Pen rNpGXZq by GreenSock (@GreenSock) on CodePen.

 

[Kutalev]

Ah! I guess I didn't understand at first how to use Flip correctly. Thank you!