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.