Cefn

Tweening HSL color

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

 

http://codepen.io/rhernando/pen/xuyJc

 

Enjoy,

Happy Tweening!!

  • Like 4

Share this post


Link to post
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.