ColorPropsPlugin

Description

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", "rgba(255,0,51,0.5)", "red", "#f0c", 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.

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
gsap.to(myObject, {duration: 1, colorProps: {borderColor: "red", myCustomProp: "rgb(204,51,0)"}, ease: "linear"});

ColorPropsPlugin is NOT intended to be used with CSS-related 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.

For example let’s say your JavaScript object has a getColor() and setColor() methods; tweening the value would be as simple as:

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

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
gsap.to(myObject, {duration: 1, colorProps: {lineColor: "rgb(102,255,51)"}, ease: "linear"});

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