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.
https://codepen.io/ItsSuperEffective/pen/ExNmgxx
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.
https://codepen.io/ItsSuperEffective/pen/xxRdEdO
Any guidance will be appreciated.