Jump to content
Search Community

question about interpolating between colors

erikb 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

Wow, what a big difference! Have you tried doing that in GSAP, the whole squaring/square root values thing using some sort of proxy to update the values on?

 

FYI: Next time you need to add a library like that to your code, you can put it inside a <script> tag at the bottom of your HTML.

 

See the Pen NqNqNb by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

If you have ever wondered why tweening a color can display some odd colors or flashing, you need to check out the video in Erik's link. It's very interesting, showing how everybody is doing it wrong, including image experts like Adobe.

 

 

As the video shows, the fix is real easy. I just used the imprecise method found on Wikipedia to get the colors to tween like p5. I have the animation set to repeat, which makes the color problem really noticeable, especially when going back to red. It turns a nasty brown with a bright flash at the end.

// Value between 0-1 that GSAP sets
var amount = Math.max(Math.min(amount, 1), 0);

var rgb1 = [255,0,0];
var rgb2 = [0,255,0];
var color = [];

function lerpColors() {    
  for (var i = 0; i < rgb1.length; i++) {
    var color1 = rgb1[i] * rgb1[i];
    var color2 = rgb2[i] * rgb2[i];
    color[i] = (Math.sqrt(amount * (color2 - color1) + color1)) >> 0;
  }    
}

Demo: 

See the Pen xGVVaN by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Unfortunately that wouldn't work because there are some special tasks related to animating CSS properties like:

  1. CSS styles aren't set as properties on the element itself; they're technically properties of the "style" object of the element. You could try TweenLite.to(element.style, 1, {colorProps:{...}}) but...
  2. Current value(s) must be queried using the browser's getComputedStyle() method because they often aren't defined as inline styles, thus don't exist on the "style" object itself. So when the tween says "what's the current value of target.backgroundColor" it'd get "" instead of "rgb(255,0,0)". 

So yeah, it'd technically be possible if you set your colors as inline styles and you formatted your tween properly, but that just doesn't seem very bullet-proof or production-ready as we try to make GreenSock stuff in general. It would definitely be easier/faster for me to add the squaring/square-rooting to ColorPropsPlugin rather than CSSPlugin, but I'd rather take a more holistic approach when the time comes to add that feature. We just have a lot of other things slated before that. 

  • Like 3
Link to comment
Share on other sites

  • 11 months later...

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