Tween Hex Values using TweenMax?

[mimeartist 26 Likes (Newbie)]

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?

[GreenSock 18,884 Likes (Superhero)]

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. 

[mimeartist 26 Likes (Newbie)]

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);
 
//MY DRAWING SVG BITS AND BOBS
 
}

[mimeartist 26 Likes (Newbie)]

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});

[Carl 11,326 Likes (Superhero)]

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(){
  console.log(o.color);
}})

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.

[mimeartist 26 Likes (Newbie)]

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