Search the Community

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

I have an SVG that has a ton of paths in it with various colors. I'd like to loop through all the paths and apply a brightness adjustment on the fill color. If I could convert the Hex to HSL, then I could tween the brightness separately. Obviously I can write a function to handle this, but it poses the question, is there something already available via TweenMax to do this? Side note, it would be really cool if there was something like this for colors: TweenMax.to(myObject,.5,{lightness:50}); Behind the scenes, Greensock would break the current color into HSL. Tween the lightness. then recombine it back.

I see you automatically switch strings to RGBa... Is there some sort of Color Utils we can tap into so we don't have to roll our own. For instance, converting hex to RGB component colors. RGB components to HSL, HSL to RGB, RGB to hex is something I typically do to rotate the hue of a color. But rather than including additional code to handle that, I was curious if they were already built in and exposed for us to use.

Hi all. GSAP is a great framework, really enjoying using it. However I'm struggling to get Hue tweening using HSL within the Color plugin (via CSS automatic binding). A terse attempt to set a background box which tweens its color slowly through the color wheel is as below, but no change seems to happen. TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); TweenMax.to(".wash",60,{backgroundColor:"hsl(+360_cw,50%,50%)",repeat:-1,yoyo:true,ease:Linear.easeNone}); If I remove the 'set' line, then there are some tweened changes to color, (visible in real time within Chrome when the element is selected) but they don't seem to visit the whole 360 degrees of the color wheel. Can anyone help tell me how this is meant to be specified or is a bug/missing feature with respect to degrees in HSL? For now I have the following kludge in place, but I don't like it much as I think something like the simpler syntax should work... TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); var washTl = new TimelineLite(); washTl.to(".wash",10,{backgroundColor:"hsl(120,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(240,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(360,50%,50%)",ease:Linear.easeNone}); washTl.yoyo = true; washTl.repeat = -1; washTl.play();