GreenSock Docs (HTML5/JS)

ColorPropsPlugin

Tweens any color-related property of any object, like myObject.borderColor from "rgb(255,0,51)" to "rgb(102,204,0)" (and you can define the initial color in almost any format like"#FF00CC" or "rgba(255,0,51,0.5)" or "red" or "#f0c" or 0xFF00CC or "hsl(105,50%,80%)"). New values are always set in the format "rgb(...)" (or rgba(...) for values that include alpha). Or, if you want them applied as a number rather than rgb() string, simply set format:"number" in the colorProps:{} object (new in version 1.3.0).

You can tween an unlimited number of color properties simultaneously. Just use the associated property name inside the colorProps:{} object like this:

//tweens myObject.borderColor and myObject.myCustomProp 
TweenLite.to(myObject, 1, {colorProps:{borderColor:"red", myCustomProp:"rgb(204,51,0)"}, ease:Linear.easeNone});

ColorPropsPlugin is NOT generally intended to be used with css-related color properties because the CSSPlugin already handles those. ColorPropsPlugin is meant to tween other color-related properties directly on your JavaScript object(s).

You may even use getter and setter functions on your JavasScript object if you want, so for example let's say your JavaScript object has a getColor() and setColor() method; tweening the value would be as simple as:

//tween a getter/setter-based value
TweenLite.to(myObject, 1, {colorProps:{setColor:"rgb(102,255,51)"}, ease:Linear.easeNone});

This even works for single-method getters/setters (like the ones in jQuery). For example, maybe you have a lineColor() method that serves as a getter and a setter based on whether or not you pass in a parameter like this:

//gets
var color = myObject.lineColor();

//sets
myObject.lineColor("rgb(255,0,51)");

//tweens
TweenLite.to(myObject, 1, {colorProps:{lineColor:"rgb(102,255,51)"}, ease:Linear.easeNone});

Note: a common mistake is to forget to wrap color-related properties in a colorProps object which is essential for specifying your intent.

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.

Get GSAP

Version: 2.0.1 updated 2018-05-30

Core

    Extras

      Plugins

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

        For an all-access pass to premium content

        Join Club GreenSock