Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

GreenSock Docs

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:

  1. .myClass {
  2. color: #FF0000;
  3. }
  4. .myClass::before {
  5. content: "This content is before.";
  6. color: #00FF00;
  7. }

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:

  1. var rule = CSSRulePlugin.getRule(".myClass::before"); //get the rule
  2. gsap.to(rule, {duration: 3, cssRule: {color: "#0000FF"}});

Or you can feed the value directly into the tween like this:

  1. gsap.to( CSSRulePlugin.getRule(".myClass::before"), {duration: 3, cssRule: {color: "#0000FF"}});
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.
×