Tween HSL color in multiply/divide relative values

[pMedia]

Hi,

 

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.

 

Thanks,

Stanley

[OSUblake]

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}%)`;
  }
}

 

[pMedia]

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?

 

Thanks!

[OSUblake]

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.

 

Quote

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