Jump to content
GreenSock

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

Jumpy animation when using HSL color

Recommended Posts

Hey guys,

I have a simple tween that changes the fill color of an SVG with a value that coming from a CMS system; the problem is that sometimes the returning value is an HSL color and it's causing some weird jumps. Is there a quick fix for this issue?

 

Thanks in advance,

Liad

See the Pen wbpNvZ by Liad91 (@Liad91) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Hi @Liad,

 

Welcome to the GreenSock forum.

 

Does this post help?


Or set the tween to time 0 please.

 

Kind regards

Mikel

 

 

Link to comment
Share on other sites

Hey @mikel,

 

Hmm, I'm not sure how the issue in the post is related to my case. Anyway, I changed the tween time to 0

Link to comment
Share on other sites

Very weird. For some reason the red rgb value isn't tweening at the same rate as the green and blue values when using an hsl color value. This is something that @GreenSock will have to look into.

  • Like 1
Link to comment
Share on other sites

Oddly enough, I think it's actually doing precisely what it's supposed to be doing. Whenever GSAP senses an HSL value, it switches to animate in HSL so that it can keep those values "pure" (if you animate HSL values in an RGB way, it looks very different and is typically undesirable). But of course those animate around the color wheel differently (it's NOT just taking the red, green, and blue and animating those linearly). Again, this is all by design. Here's a demo that shows the HSL values and then their converted RGB counterparts: 

 

See the Pen 67ccc31471f41af5a36d3a7b9d209a75?editors=0010 by GreenSock (@GreenSock) on CodePen

 

(Crack open the console to see). 

 

It's using ModifiersPlugin to just intercept things just before they're applied. See what's happening? The HSL values are indeed animating exactly as they should, and then the browser converts them back to RGB which is fine. Again, this is merely a side effect of how HSL values animate compared to RGB. 

 

Does that clear things up? 

 

If you don't want to animate things in HSL, you could convert them into RGB before feeding them into the tween. This page might be useful: https://css-tricks.com/converting-color-spaces-in-javascript/

  • Like 3
Link to comment
Share on other sites

There infinite ways to animate between colors. This is one of my favorite graphics to illustrate that and it is just illustrating the RGB color space (pulled from this GraphicDesign.SE answer).

enter image description here

 

Animating between HSL is different, as seen in the visualization of its color space (pulled from this page).

 

Image result for hsl color space visualized

  • Like 4
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.
×