Jump to content


set className vs color directly

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Still learning javascript and gsap, so don't judge!  
Why is d2 pink?


style = document.createElement("style");
style.innerHTML += " .d1 { font-name:'Arial'; font-style:italic; font-size: 48px; color: purple; }\n";
style.innerHTML += " .d2 { font-name:'Arial'; font-style:italic; font-size: 80px;  }\n";
style.innerHTML += " .d3 { font-name:'Arial'; font-style:italic; font-size: 48px;  color: purple;}\n";

function div(d) {
  var e = document.createElement("div");
  e.setAttribute("id", d);
  return d;

TweenMax.set("#"+div("d1"), {text:"d1", className:"+=d1"});  //purple
TweenMax.set("#"+div("d2"), {text:"d2", className:"+=d2", color:"red"}); //pink???
TweenMax.set("#"+div("d3"), {text:"d3", fontSize:"60px", /*className:"+=d3",*/ color:"red"}); //red


See the Pen mdbERbO by DickeySingh (@DickeySingh) on CodePen

  • Like 1
Link to comment
Share on other sites

This is certainly weird! My guess is that it's simply not tweening to the end value in the short timeframe (set() is essentially a 0 second tween).


Have  a look here to see how the short duration to() tweens are rather inconsistent with end values upon rerunning the pen. Specifically how d2 is never the end value, d2a is somewhere in the middle, and d2b is sometimes full red, sometimes not.


See the Pen YzKWQGG by sgorneau (@sgorneau) on CodePen

Link to comment
Share on other sites

Hello DS1 and welcome to the forums!


This has something to do with the className tween. If you remove the bit about className:"+=d2", it is red as it should be. 


We don't recommend using className tweens because they are very intensive for the browser (especially in a "0" duration tween like this). Instead, we recommend tweening the properties that you need to animate. 


Maybe @GreenSock can give us additional insight.

  • Like 1
Link to comment
Share on other sites

Well this is pretty ambiguous because technically this is like defining two different color values that you're asking the tween to animate to at the same time - one from the className and one from the "color" you're defining in the tween itself. Like @ZachSaucier said, we really don't recommend className tweens because it requires literally analyzing every single property, finding the ones that are different and animating those. It's much cleaner to just tell GSAP the specific properties/values you want to animate (plus I think that makes your code more readable and direct - less ambiguity). 

  • Like 3
Link to comment
Share on other sites

Thanks @Shaun Gorneau,  @ZachSaucier, and  @GreenSock


Still learning and assumed a Tween*.set() was not a tween but setting the initial starting state without a tween.  


I wanted to set common class stuffs without color in class and color in call.

I'll skip className in tweens. Thanks again!



See the Pen mdbERbO by DickeySingh (@DickeySingh) on CodePen


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.