CSSRulePlugin.getRule
CSSRulePlugin.getRule( selector:String ) : Object
[static] Provides a simple way to find the style sheet object associated with a particular selector like ".myClass"
or "#myID"
.
Parameters
selector: String
The name that exactly matches the selector you want to animate (like
".myClassName"
).
Returns : Object
The stylesheet object (or an array of them if you define only a pseudo element selector like ::before
).
Details
Provides a simple way to find the style sheet object associated with a particular selector like .myClass
or #myID
. You'd use this method to determine the target of your tween.
For example, let's say you have CSS like this:
.myClass {
color: #FF0000;
}
.myClass::before {
content: "This content is before.";
color: #00FF00;
}
And you want to tween the color of the .myClass::before
to blue
. Make sure you load the CSSRulePlugin.js file and then you can do this:
var rule = CSSRulePlugin.getRule(".myClass::before"); //get the rule
gsap.to(rule, {duration: 3, cssRule: {color: "#0000FF"}});
Or you can feed the value directly into the tween like this:
gsap.to(CSSRulePlugin.getRule(".myClass::before"), {
duration: 3,
cssRule: { color: "#0000FF" },
});