GSAP3 {className:"+=classname"}

[jollygreen]

How can I add a class to an element with GSAP3?  In the code I'm working on, I need to add and remove a class using GSAP.  Below is an example of what I'm trying to accomplish.  Thanks for you help.

See the Pen WNPPWKP by jollygreen10 (@jollygreen10) on CodePen

[GreenSock]

In very, very old versions of GSAP (before 2019), GSAP did offer the ability to animate between classNames but we removed that in 3.x because:

• It's wasteful. In order to do it effectively, GSAP would literally have to compare EVERY possible CSS property between the starting state and the ending state and isolate just the ones that changed and then animate between those. It's far, far better to just animate properties directly (have the developer specify which properties/values should change). Performance is very important to us and it felt yucky to allow folks to [unknowingly] structure things in such a wasteful way. We wanted to encourage best practices where it was feasible. This was an obvious choice. 
• It ate up a fair amount of extra kb in GSAP itself, making everyone pay a kilobyte-tax for a feature that a tiny fraction of users would ever tap into...on top of the fact that it was wasteful performance-wise. 

In short, it was too costly in terms of both kb and performance, so we dropped that feature when going from 2.x to 3.x. 

 

In your demo, it's super simple to just specify width: 

See the Pen BaMMXQr?editors=1010 by GreenSock (@GreenSock) on CodePen

 

If you're really just trying to animate all the properties over the course of a particular duration and you don't mind being limited to the easing that CSS provides, you could just use CSS transitions for that. It'd be simple enough to add callbacks in a timeline to control the timing of when those class changes take place and do it via JS in the callback. 

 

Another option is using Flip plugin which opens a world of possibilities if you're trying to animate between states (far more than CSS transitions could do) but you still need to specify property names for ones beyond transforms/width/height. It's all very doable though. 

 

Does that clear things up? 

[jollygreen]

@GreenSock - makes sense.  Thank you.