Jump to content


tweening a css color property's r g b values

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 have a button which inverts the colors on my website. It utilizes a plugin called rgb color - http://www.phpied.co...-in-javascript/ to get the color value of all dom elements, and invert them. I'm doing that with the code below:


invertColors: function(){
var colorProperties = ['color', 'background-color'];

//iterate through every element
$('*').each(function() {
var color = null;

for (var prop in colorProperties) {
prop = colorProperties[prop];
if (!$(this).css(prop)) continue; //if we can't find this property or it's null, continue
color = new RGBColor($(this).css(prop)); //create RGBColor object
if (color.ok) { //good to go, build RGB
var element = $(this);
$(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')'); //subtract each color component from 255
color = null; //some cleanup
} //end each for prop in colorproperties
}); //end each
} //end invert colors


What I'd like to do is rather than just flip the color, tween it. I'm curious to try the greensock tweening engine. So supposedly, I should be able to make a call something like this:


TweenLite.to(element, 1, {css:{prop:'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')' }, ease:Power2.easeOut});

but this is not working (no errors are thrown), so I'm not sure what I'm doing wrong. Anyone have any ideas for how to get this working, or what the proper way to tween all of these color properties would be?

Link to comment
Share on other sites

The problem is twofold:

  1. You're not assigning the property correctly. You're literally asking css to tween "prop" instead of "backgroundColor" or "color".
  2. TweenLite expects you to use the camelCase variants of css properties ("backgroundColor", not "background-color" because dashes generally aren't allowed in variable/property names in JS).

This should do the trick:



function invertColors() {
   var colorProperties = ['color', 'backgroundColor'];

   //iterate through every element
   $('*').each(function() {
       var color = null,
          obj, css, prop;
      for (prop in colorProperties) {
          prop = colorProperties[prop];
          obj = $(this);
          if (!obj.css(prop)) continue; //if we can't find this property or it's null, continue
          css = {};
          color = new RGBColor(obj.css(prop));
          if (color.ok) { 
              css[prop] = 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')';
              TweenLite.to(this, 2, {css:css});


Does that clear things up?

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.