Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DS1

set className vs color directly

Recommended Posts

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

 

style = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(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);
  document.getElementsByTagName("body")[0].appendChild(e);
  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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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!

 

Updated: 

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

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×