className not tweening in GSAP 3.5.1, but does in TweenMax 2.0.1

[ItsSuperEffective]

Hello friends!

 

I've been using GSAP for years since the good ol flash days for Online Advertisements, and have continued to keep using the latest CDN libraries as it gets updated on the Google JS Hosted Libraries provided here: https://support.google.com/richmedia/answer/6307288?hl=en

 

For the longest time I used tweenmax_2.0.1_min.js, which is obviously outdated, and when I updated to the newer gsap_3.5.1_min.js I noticed that the className property doesn't seem to tween correctly as it did before.

 

 

In my CodePen I am using className to swap between a couple classes to transition the numbers used in the css rule "clip:rect()". Yes, yes, I know clip rect is deprecated, but my employers client's often ask for browser compatibility with older browsers. Using TweenMax 2.0.1 You'll see the Red Box wipes away, then the blue box wipes in it's place. but with gsap 3.5.1, the class name changes, but it does not tween the values at all. The point is, it used to work, and now it doesn't.

 

I know, I COULD just put "clip:'rect()" as a property right into JS (and this does work), but I am trying to keep my CSS values in my CSS, and my JS strictly animation as a practice.

 

Now, I did some digging, and saw that the syntax has changed somewhat for timeline so I tried applying it, but came to the same problem.

 

See the Pen xxRdEdO by ItsSuperEffective (@ItsSuperEffective) on CodePen

 

Any guidance will be appreciated.

See the Pen ExNmgxx by ItsSuperEffective (@ItsSuperEffective) on CodePen

[PointC]

Hi @ItsSuperEffective 

 

That's correct - GSAP3 does not support className tweens. Jack lists the reasons here:

 

 

 

There is an unofficial className plugin discussed here:

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

 

Hopefully that helps. Happy tweening.