Garrettlynch

Working in Chrome, Firefox and Safari across desktop and mobile so not sure what you are looking at it in.

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.

I provided an example in a link above. I asked one question in the last post, I have colour changes working with three I just need to know what the updating value in the Tweenlite's to() function is.

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). TweenLite.to(initial, speed, { value: valueh, 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; } else { //increment colourcounter colourcounter++; } //allow next animation colouranimation = 0; } });

I think it's something to do with the hsl format and converting it, tweenlite's hue runs from 0.0->360.0 but three.js uses 0.0->1.0 (three.js also doesn't use hsla). Your example posted here plugged into mine the stream looks like this: Object {value: "hsla(122.5531733333333, 100%, 20.638293333333326%, 1)", _gsTweenID: "t0"} I haven't mapped it to the colour in three.js but I assume the format is right. When I try with rgb and three.js it looks like this: T…E.Color {r: 0, g: 0.09046127853134676, b: 0.21761911344805118, _gsTweenID: "t0"} and that works just fine, when I use the hsl format based on what you posted like so: T…E.Color {_gsTweenID: "t0", value: "hsl(0.59722222223, 100%, 50%)"} it doesn't work (and yes I did try with alpha just in case). Can't stand codepen sorry - the script is online here http://www.asquare.org/work/blend2/ function animate() calls function colourTo() which is in a linked file here http://www.asquare.org/work/blend2/resources/javascript.js

Hi 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%). I've tried to get hsl to work in the TweenLite.to() function but am unclear how this works, how is hsl used in the function? Will using hsl tweening through hues 0 -> 120 or also just fade from one to the next? //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; } }