Jump to content
GreenSock

Mike

Tweening hue-rotate on an image

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

I'm working on creating gauges for displaying boring data in a more exciting way... I'm aiming to change the color of the gauge to some color that corresponds with the value. I can do this instantly with the simple CSS value of {-webkit-filter: hue-rotate(180deg);} but I would much rather have the colors fade through different areas of the spectrum before reaching the correct hue that matches the gauge value. However, when I use a TweenMax.to animation it doesn't step through the different degree values and instead changes instantly..... Below is my tween.

 

TweenMax.to($(gaugeId), 3.5, {filter:'hue-rotate(' + hue + 'deg)', delay: 1});

 

What am I doing wrong?

 

Thanks,

~Mike

Link to comment
Share on other sites

Hi Mike,

 

When I first read your post I didn't see that you were using the filter property. We currently don't support css filters. 

 

If I were using hsl() color on a background I would tween the hue of a generic object and manually apply the value onUpdate like so:

 

//generic color object
var color = {hue:0}
var redBox = $("#redBox")[0];


TweenMax.to(color, 4, {hue:360, onUpdate:applyHue, onUpdateParams:[redBox], repeat:-1});




function applyHue(element) {
  element.style.backgroundColor = "hsl(" + color.hue + ", 100%, 50%)"
}

http://codepen.io/GreenSock/pen/ocdxn?editors=001

 

Perhaps you can use the same technique with the filter. 

 

I'd say, fork the pen and give it a shot. If you get it to work please let us know.

  • Like 1
Link to comment
Share on other sites

Thanks, Carl!  That update from the other thread really helped.  Below is the link to me codepen...

 

See the Pen psEJa by anon (@anon) on CodePen

 

~Mike

Link to comment
Share on other sites

Very nice, Mike. Cool you got it working. Thanks for sharing. I imagine this will help me in the future too!

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