FLIP OnLeave Callback

[Wilson Kamau]

Hello,

 

I am having trouble getting the onLeave Callback to work properly in my Flip animations. I have tried setting absolute to true, not setting absolute to true, using the absoluteOnLeave Callback, all to no avail. If I understand correctly, the onLeave callback is supposed to allow developers to animate leaving objects gracefully, as opposed to the objects disappearing abruptly.  I would like the squares to fade and rotate as they are being removed from the document. After running the codepen program, you have to comment out the removeSquares() function at the bottom of the js file to reset the squares. I have a feeling that I've completely overlooked a piece of this process, that's why I've turned to the community's experienced GSAP devs. Any suggestions are much appreciated!  

See the Pen zYEeXZj?editors=1111 by wilsonknjoroge98 (@wilsonknjoroge98) on CodePen

[OSUblake]

Hi Wilson,

 

onLeave won't work if you remove the elements before the FLIP. To get it to work, you need to set display: none on the outgoing elements, and then remove them after the animation.

 

See the Pen dyZjdmX by GreenSock (@GreenSock) on CodePen