Jump to content
Search Community

Jumpy animation when using HSL color

Liad 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

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

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

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