Converting gsap2->3

[NickNo]

Hi, I'm having a little trouble converting an old codepen over to gsap3 ... I thought I had it covered - but the transition has messed up - I have lost the skew and the back animation isn't right .... any suggestions?

 

GSAP3 version

See the Pen jOVoqKy by nickjacobsnz (@nickjacobsnz) on CodePen

 

GSAP2 version

 

 

 

 

See the Pen zYZXMJm by nickjacobsnz (@nickjacobsnz) on CodePen

[GreenSock]

There is no "className" plugin baked into GSAP 3. We removed that for several reasons: 

1. It's almost always better to directly animate individual properties. It's MUCH faster (performance). Animating to/from a class requires literally comparing every...single...CSS property and isolating the ones that are different. 
2. We wanted to streamline things in GSAP 3 and shave off file size. 

For your demo, you can just animate the clipPath property since that's the only thing those className tweens were doing: 

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

 

I personally would structure things a bit differently so that it's all dynamic. That means if the user clicks multiple times quickly, it still works smoothly: 

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

[NickNo]

Hey that's great thanks Jack  -  thanks for the very helpful response!

[GreenSock]

No problem! Enjoy.