Tweening HSL color

[Cefn]

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

[GreenSock]

There are a couple of problems here:

1. Color tweening splits apart the red, green, and blue values and interpolates those but you're trying to do something very different which is interpolate just the hue. 
2. You cannot do relative values inside a color value.

You can definitely get the effect you're after, though, by using an onUpdate and a generic object to hold your hue, saturation, and lightness values so that you can tween those as you please and then apply them on each update:

var element = document.getElementById("box"),
    color = {h:0, s:50, l:50};

TweenMax.to(color, 60, {h:360, onUpdate:applyColor, ease:Linear.easeNone, repeat:-1});

function applyColor() {
    element.style.backgroundColor = "hsl(" + color.h + "," + color.s + "%," + color.l + "%)";
}

Is that what you're looking for? 

 

You could also create a plugin for this type of behavior.

[Rodrigo]

Hi and welcome to the Greensock forums.

 

The issue with the timeline you're attempting is that TimelineLite doesn't have either the repeat or yoyo methods, so if you change the syntax to this:

TweenMax.set(".wash",{backgroundColor:"hsl(0,100%,50%)"});
var washTl = new TimelineMax({repeat:-1, yoyo:true});

washTl
    .to(".wash",2,{backgroundColor:"hsl(120,100%,50%)",ease:Linear.easeNone})
    .to(".wash",2,{backgroundColor:"hsl(240,100%,50%)",ease:Linear.easeNone})
    .to(".wash",2,{backgroundColor:"hsl(360,100%,50%)",ease:Linear.easeNone});

Also check how you can concatenate the different instances in the timeline without calltin wasTl everytime.

 

Now for the reason why your first code is not working is because the engine detects that the both the starting and ending colors are the same and since passing from one color to another is not a rotation stuff, adding "_cw" doesn't do anything, I believe that this is caused by one of the many implementations made to the engine in order to make it as fast as possible, of course Carl or Jack could confirm what I'm saying.

 

Best,

Rodrigo.

[Carl]

Here is a demo of Jack's code: http://codepen.io/GreenSock/pen/mFInc

[Cefn]

Thanks for all your contributions.

 

Yeah, I should have noticed the incorrect TimelineLite reference as I'd recognised before that yoyo was TimelineMax only.

 

The approach of tweening my own object properties with onUpdate is quite elegant. 

 

However, I believe that for consistency with other degree oriented values (the hue in HSL varies from 0 to 360 degrees), it would be worth looking into wiring HSL to the DirectionalRotation plugin by default as described at http://www.greensock.com/gsap-js-1-9-0/ making it possible to use degrees consistently wherever they appear.

[Rodrigo]

Hi,

 

I'm pretty sure that this is not what you're after, but I couldn't avoid to play with the code Jack suggested so I came up with a simple HSL color selector using Draggable and Jack's code:

 

See the Pen xuyJc by rhernando (@rhernando) on CodePen

 

Enjoy,

Happy Tweening!!

[GreenSock]

You're crazy, Rodrigo Good job.