I'm trying to tween between colours but it's not quite what I expected (code below) - it seems to fade from one colour to the next rather than animate through all the colours in between.  I think this is because it's doing it in rgb, I want to tween between hues in hsl colours so for example from hsl(0, 100%, 50%) to hsl(120, 100%, 50%). //colours var colours = { 0 : new THREE . MeshPhongMaterial ({ color : "hsl(120, 100%, 50%)" }), 1 : new THREE . MeshPhongMaterial ({ color : "hsl(200, 100%, 50%)" }), 2 : new THREE . MeshPhongMaterial ({ color : "hsl(240, 100%, 50%)" }), 3 : new THREE . MeshPhongMaterial ({ color : "hsl(360, 100%, 50%)" }) //animate to next colour colourTo ( colourplane , colours [ 0 ], 5 ); //colour tween function colourTo ( target , value , speed ) var initial = new THREE . Color ( target . material . color . getHex ()); var value = new THREE . Color ( value . color . getHex ()); //tween colour TweenLite . to ( initial , speed , { r : value . r , g : value . g , b : value . b , onUpdate : function () { target . material . color = initial ; var hsla = { value : "hsla(120, 100%, 20%, 1)" }; TweenLite . to ( hsla , 0.3 , { value : "hsla(360, 100%, 80%, 1)" , onUpdate : function (){ console . log ( hsla . value ) var hsla = { value : "hsla(120, 100%, 20%, 1)" }; TweenLite . to ( hsla , 0.3 , { value : "hsla(360, 100%, 80%, 1)" , onUpdate : function (){ console . log ( hsla . value ) Hi, this has got me a bit closer.  Three.js had me confused as to how it sets hsl, setting it in a material's color seems to only work as a string 'hsl(120, 100%, 50%)' but using setHSL it's like so: setHSL( 0, 1, 0.5 ).  What I have below is now setting each colour if I use valueh (the hsl target hue) but not fading from initial through all the colours in between as you have in your demo - can't understand what the updating value is within the to() function and how I access it to plug it into the h of hsl (see 'what goes here?' in the code).         onUpdate : function () { target . material . color . setHSL ( 'what goes here?' , 1 , 0.5 ); onComplete : function () { //if colourcounter equals 3 if ( colourcounter == 3 ) //reset colourcounter colourcounter = 0 ; //increment colourcounter colourcounter ++; //allow next animation colouranimation = 0 ; You didn't provide me with an answer that helped.  It may have been correct, I don't know because yes I tried and couldn't get it working.  An example building on what I posted would have been more helpful rather than an example that used TweenMax instead of TweenLite, changes all of the variable names, how onupdate is calling a function and doesn't respond to the question I asked - your example couldn't have been more confusing for someone who is trying to use TweenLite for the first time.  In my working example I used explicit variable names so I could try to understand what is occurring - in yours you used 'h: 1' and 'color.h' and until Carl clarified I didn't know whether those were the same h's or the h in the original color variable. Many thanks Carl for clarifying as mentioned above and for pointing out https://plnkr.co/ which looks useable to me (hate the three pane designs of all the others - find them very unintuitive).  I think I understand what should be happening but unfortunately I still can't get TweenLite and Three.js to play nicely.  Jumped ship to tween.js and got it working in 30 minutes (online here - http://www.asquare.org/work/blend2/ ) - so something odd is happening, either in converting between hsl formats or the color itself from the tween not being understood by three.js. You didn't provide me with an answer that helped.  It may have been correct, I don't know because yes I tried and couldn't get it working.  An example building on what I posted would have been more helpful rather than an example that used TweenMax instead of TweenLite, changes all of the variable names, how onupdate is calling a function and doesn't respond to the question I asked - your example couldn't have been more confusing for someone who is trying to use TweenLite for the first time.  In my working example I used explicit variable names so I could try to understand what is occurring - in yours you used 'h: 1' and 'color.h' and until Carl clarified I didn't know whether those were the same h's or the h in the original color variable Sorry, but the code you posted makes sense to you, and only you. There is no way for anybody to know what's going on, or what you're having trouble with without more context. That is why you were asked on multiple occasions to provide a demo. It's not because we're curious, and want to see what you're working on. It's because we can't help you fix a problem if we don't see one. onUpdate : function () { target . material . color . setHSL ( 'what goes here?' , 1 , 0.5 ); onComplete : function () { //if colourcounter equals 3 if ( colourcounter == 3 ) //reset colourcounter colourcounter = 0 ; //increment colourcounter colourcounter ++; //allow next animation colouranimation = 0 ; So not knowing what those values are, or where they are coming from, I provided a very simple example of how to tween and set an hsl color. I used 'h: 1' and 'color.h' because that is the property of the hsl object returned by calling getHSL, so that is the property that needs to be tweened. I can't tween a "value" property if it doesn't exist. I clearly showed how I was getting the hsl color object, so I'm not sure why that was confusing. As to why I used TweenMax instead of TweenLite, it's because I copied and pasted the tween from Dipscom's demo into the post, and edited there. You didn't ask Dipscom about why he was using TweenMax, so I'm assumed you knew the difference. For what you're trying to do, there is no difference. TweenMax is TweenLite, but with some extra methods. Sorry if that confused you. So after posting that example is when I noticed you posted some links to your code, but it was still hard to understand because you're using global values that are split up across different files. I copied as much of the needed functionality from your code into a fork of Dipscom's demo, and showed how to tween and set an hsl value. I don't know why you're having trouble with GSAP and Three.js, but there shouldn't be any problems. My guess is it's something you're doing with three.js, or with some data your using. Put what you have on plnkr, and we can take a look at it for you. It shouldn't be that hard to figure out where the problem is coming from.