Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tween HSL color in multiply/divide relative values

Recommended Posts



I have seen the example on your site on tweening hsl color with += and -= relative values. Is there a reason that *= and /= relative values are not implemented? Here is an example. We wanted to reduce a few objects' brightness by 50% of the current value, no change to hue and saturation. We entered the fill tween value as hsl(+=0, +=0%, /=2%). The H and S relative values worked but didn't work for L with /=2%. We also tried *=2% to double the brightness, didn't work either. In both cases, the L values were tweened to 2% instead.




Link to comment
Share on other sites

Hi pMedia, 


I remember *= and /= relative values being brought up a long time ago, but I can't find the post. The reason for not implementing them is that they are not a common operations, but every animation would have to check for those conditions, which adds a slight performance penalty.


And since we added function based values, it makes this kind of thing pretty simple for most values.


gsap.to(".box", {
  y: (i, el) => gsap.getProperty(el, "y") * 2


But color is of course a lot more complex. I guess you could use some GSAP utils to write your function to do that. Here's a very simplistic example that only multiplies the HSL values.


gsap.to(".box", {
  backgroundColor: multiplyHSL("backgroundColor", 1, 1, 0.5)

function multiplyHSL(prop, hValue, sValue, lValue) {
  return (i, el) => {
    let [h, s, l] = gsap.utils.splitColor(gsap.getProperty(el, prop), true);
    return `hsl(${h * hValue}, ${s * sValue}%, ${l * lValue}%)`;


  • Like 3
Link to comment
Share on other sites

Thanks for the quick reply and the workaround solution! I hope this function based value solution will also work for tweening css variables.

One question, are the two arguments (i, el) of the function standard? I assume el is the tweening object, what about the i? Is there a documentation page for this function based value function?



Link to comment
Share on other sites

45 minutes ago, pMedia said:

One question, are the two arguments (i, el) of the function standard?


Yep. Function based values are explained on the Tween docs.



Function-based values

The function is passed three parameters:

  1. index - the index of the target in the array. For example, if there are 3 <div> elements with the class ".box", and you gsap.to(".box", ...), the function gets called 3 times (once for each target); the index would be 0 first, then 1, and finally 2.
  2. target - the target itself (the <div> element in this example)
  3. targets - the array of targets (same as tween.targets())


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