Jump to content


Tween Hex Values using TweenMax?

Moderator Tag
Go to solution Solved by Carl,

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

I'm tweening the values of an object which is giving me the values of the points on a face for a nose etc... I'm also including the hex values of the items' colour... I'm storing the values in tne object and then referring to them as I tween... however the colours don't seem to tween...


Is there a format I need to use to tween a hex? should it be 0xFF0000 instead of #FF0000 perhaps?

Link to comment
Share on other sites

It'd be super helpful if you provided some sort of demo or code or something. How exactly are you animating the colors? Are you using the colorProps plugin? Plain strings? Are they DOM elements? 


As for the formatting of hex values, "#FF0000" should be fine. 

  • Like 1
Link to comment
Share on other sites

I'm drawing the svg shapes with the current tweened value rather than tweening the colour of the item...

myFace = {headWidthVal:headWidth, headHeightVal:headHeight,  hairColVal:hairCol }
TweenMax.to(myFace, 0.5,{ headWidthVal:aimHeadWidth, headHeightVal:aimHeadHeight,  hairColVal:aimHairCol, onUpdate:drawFace, ease: Elastic.easeOut});
function drawFace(){
hairCol = (myFace.hairColVal);
Link to comment
Share on other sites

I've included the ColorPropsPlugin and in the tween I'm wrapping those values in the colorProps:{ } do I need to define them in the initial object? Sorry for not including a codepen, it's just part of a bit of a monster 

myFace = {headWidthVal:headWidth, headHeightVal:headHeight, curveFactorVal:curveFactor, curveFactorBVal: curveFactorB, randomAmountVal: randomAmount, guideStrengthVal:guideStrength, faceColVal:faceCol, noseColVal:noseCol, hairColVal:hairCol };

TweenMax.to(myFace, 0.5,{ headWidthVal:aimHeadWidth, headHeightVal:aimHeadHeight, curveFactorVal:aimCurveFactor, curveFactorBVal:aimCurveFactorB, randomAmountVal:aimRandomAmount, guideStrengthVal:aimGuideStrength, colorProps:{faceColVal:aimFaceCol, noseColVal:aimNoseCol, hairColVal:aimHairCol}, onUpdate:reportArray});
Link to comment
Share on other sites

  • Solution

The reason a CodePen is so helpful is so that we don't have to see the monster part of your project, just the GSAP part that isn't working. 

That way we can quickly asses where the failure is and offer a fix. So all we really need to test in your case is if a color value is changing, and nothing really related to drawing SVGs. 


So, a very basic example of what you are explaining could look like this:


var o = {color:"#ff0000"};
TweenMax.to(o, 1, {colorProps:{color:"#0000ff"}, onUpdate:function(){

demo: http://codepen.io/GreenSock/pen/MJqKrN?editors=0011


So maybe you can start with that basic example and change it to better match how you are tweening color values and we can see where it breaks down.

  • Like 3
Link to comment
Share on other sites

I just tried to place my code in there, I've since forked it... and it worked... turned out I'd added the throwProps, but my TweenMax version was a lower number... so put the new one in and it worked! thanks for your patience :)


See the Pen zNJBOa?editors=0011 by mimeArtist (@mimeArtist) 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.