Animating 3D Button flips it!

[JulianBroudy]

Hello,

 

My button behaves weird after animating it.

For comparison, please interact with the button without touching the code then uncomment one of the options in the JS window and see what happens.

 

In my website it acts even crazier than in the codepen.

Could not upload a gif because it exceeds the upload limit so here is a link for my GDrive: Illustration of Button's behavior.

 

Thank you.

See the Pen mdJzegv by JulianBroudy (@JulianBroudy) on CodePen

[GreenSock]

Welcome to the forums, @JulianBroudy. 

 

It looks to me like the problem has nothing to do with GSAP - it's that you're setting the boundingClientRect constant to aElem.getBoundingClientRect() initially and you're basing all the calculations on that, but then you MOVE the aElem element and you forgot to update its bounding client rect accordingly. So all your calculations are off from that point on. See what I mean? 

 

You could update it in an onUpdate of the animation if you need it constantly updated, or in an onComplete if you just want to delay it until then. It's up to you. 

 

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

 

Does that help?  

[JulianBroudy]

4 hours ago, GreenSock said:

Does that help?  

Oh! Silly me!

 

It does help, thank you very much.