Jump to content
Search Community

Tweening hue-rotate on an image

Mike
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

Posted

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

Posted

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
Posted

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

Posted

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

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