GreenSock JavaScript API Docs | All Packages | All Classes | Index | Frames No Frames |
CSSRulePlugin

Package | com.greensock.plugins
Class | public class CSSRulePlugin
Inheritance | CSSRulePlugin TweenPlugin Object

Allows TweenLite and TweenMax to animate the raw style sheet rules which affect all objects of a particular selector rather than affecting an individual DOM element's `style` (that's what the CSSPlugin is for). For example, if you have a CSS class named `".myClass"` that sets `background-color` to `"#FF0000"`, you could tween that to a different color and ALL of the objects on the page that use `".myClass"` would have their background color change. Typically it is best to use the regular CSSPlugin to animate css-related properties of individual elements so that you can get very precise control over each object, but sometimes it can be useful to tween the global rules themselves instead. For example, pseudo elements (like `:after, :before,` etc. are impossible to reference directly in JavaScript, but you can animate them using CSSRulePlugin. NOTE: CSSRulePlugin requires the CSSPlugin, so please make sure it is loaded too.

The plugin itself actually has a static `getRule()` method that you can use to grab a reference to the style sheet itself based on the selector you used in your CSS. For example, let's say you have CSS like this:

    .myClass {
        color:#FF0000;
    }
    .myClass:before {
        content:"This content is before.";
        color:#00FF00;
    }

Now let's say you want to tween the color of the `.myClass:before` to blue. Make sure you load the CSSRulePlugin and CSSPlugin JavaScript files and then you can do this:

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

And if you want to get ALL of the :before pseudo elements, the `getRule()` will return an array of them, so I could do this:

    TweenLite.to( CSSRulePlugin.getRule(":before"), 3, {cssRule:{color:"#0000CC"}});

Keep in mind that it is typically best to tween a property that has already been defined in the specific rule that you're selecting because it cannot perform a calculated style (the combination of styles from other selectors that might pertain to similar elements). For example, if we didn't define any color initially for the `.myClass:before` and tried to tween its color to blue, it would start transparent and go to blue. One way around this is to simply set your starting values explicitly in the tween by doing a `fromTo()`. That way there's no having to guess what the starting value should be when it isn't defined previously.

Don't forget to wrap the values in a `cssRule:{}` object.

Copyright 2008-2012, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.

Public Methods

| Method | Defined By
--- | --- | ---
|  | getRule(selector:String):Object [static] Provides a simple way to find the style sheet object associated with a particular selector like ".myClass" or "#myID". | CSSRulePlugin

Method Detail

getRule | () | method

`public static function getRule(selector:String):Object`

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
    TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}});

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

    TweenLite.to( CSSRulePlugin.getRule(".myClass:before"), 3, {cssRule:{color:"#0000FF"}});

Parameters

| `selector:String` — The name that exactly matches the selector you want to animate (like ".myClassName").

Returns

| `Object` — The style sheet object (or an array of them if you define only a pseudo element selector like `:before`)

Thu Dec 20 2012, 04:30 PM -06:00