Jump to content
Search Community

Tweening hue-rotate on an image

Mike 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

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?




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%)"



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

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