Jump to content
Search Community

Tweening HSL color

Cefn test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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. 


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...

var washTl = new TimelineLite();
washTl.yoyo = true;
washTl.repeat = -1;
Link to comment
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
Link to comment
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:

var washTl = new TimelineMax({repeat:-1, yoyo:true});


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.




  • Like 1
Link to comment
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.

Link to comment
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.
  • Create New...