Jump to content
Search Community

Tween Hex Values using TweenMax?

mimeartist test
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

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

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.
  • Create New...