FLIP onLeave Animation with display: none;

[angelokeirsebilck]

Hi,

 

I'm using FLIP plugin to animate the transitions tabs content.

The onEnter animations work fine, cards slide in from the bottom. However the onLeave animation does not work. The items disappear straight away.

What am I doing wrong here?

Thanks!

See the Pen oNdNYjO by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

[Rodrigo]

Hey,

 

Yeah the issue is that, when you do a fade flip that includes display: none, is better to add the absolute and fade configurations to the Flip.from() method. If you check Flip's documentation you can find that under Special Properties.

 

This sample from the GreenSock collection seems to be doing something similar to what you're after:

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

 

Finally this seems to be working on the codepen sample you provided (thanks by the way for the simple example!! 👍 )

See the Pen qBYByrb?editors=0010 by rhernando (@rhernando) on CodePen

 

Happy Tweening!!!