Get GSAP

Version: 1.13.1 updated 2014-07-22

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Jump to content

        Codepen Notification

        You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

        tweening a css color property's r g b values

        Started by mheavers , Jan 16 2013 12:40 PM rgb css tween invert

        2 replies to this topic
        mheavers

          Newbie

        • mheavers
        • 2 posts

        Post #1 by mheavers , 16 January 2013 - 12:40 PM

        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.b) + ')'); //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.b) + ')' }, 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?
        • Back to top

        GreenSock

          Administrator

        • GreenSock
        • 10,812 posts

        Post #2 by GreenSock , 16 January 2013 - 10:06 PM

        The problem is twofold:
        • You're not assigning the property correctly. You're literally asking css to tween "prop" instead of "backgroundColor" or "color".
        • 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.<img src='http://forums.greensock.com/public/style_emoticons/<#EMO_DIR#>/cool.png' class='bbc_emoticon' alt='B)' /> + ')';
                       TweenLite.to(this, 2, {css:css});
                    }
                } 
            }); 
        }

        Does that clear things up?
        • Back to top

        mheavers

          Newbie

        • mheavers
        • 2 posts

        Post #3 by mheavers , 17 January 2013 - 11:33 AM

        Yes! Thank you.
        • Back to top




        0 user(s) are reading this topic

        0 members, 0 guests, 0 anonymous users