Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

question about interpolating between colors

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

This issue [ https://github.com/processing/p5.js/pull/615 ] about interpolating colors for the web project p5.js caught my eye and made me wonder about interpolating between colors in greensock.  Are the techniques described therein applied to greensock color tweens


Just curious.  Thanks.

Link to comment
Share on other sites

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;


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

  • Like 2
Link to comment
Share on other sites

Good stuff, guys. This isn't something we can easily drop into CSSPlugin at this point due to a lot of optimizations under the hood, but I'll keep it in mind for an update in the future. Love the video explanation. 

Link to comment
Share on other sites

Just out of curiosity, how interconnected are color and the CSSPlugin? Would modifying the colorPropsPlugin with CSS propNames cause problems?

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

Any update on this colorful issue?

Link to comment
Share on other sites

Nobody else has requested it, and we have added hsl() color capabilities (including relative values), so hopefully that will suffice. 

  • Like 2
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.