Chapter 188: CSSRulePlugin (deprecated)

Core Idea

CSSRulePlugin let GSAP animate a raw stylesheet rule (affecting every element matching that selector, including inaccessible pseudo-elements like ::before/::after) instead of an individual element's inline styles — it's now deprecated in favor of animating CSS custom properties directly.

Key Concepts

• Deprecated: GSAP now animates CSS variables natively — gsap.to("html", { "--my-variable": 100, duration: 2 }) — which has excellent browser support and no longer needs this plugin.
• Animating a CSS variable triggers a repaint regardless of which property it feeds, so use sparingly for performance-sensitive cases.
• The plugin's main use case was targeting things JS can't reference directly, like ::before/::after pseudo-element styles, by getting a reference to the underlying stylesheet rule via CSSRulePlugin.getRule().

Anti-patterns

• Using CSSRulePlugin in new code: prefer CSS custom properties + native GSAP CSS-variable animation instead.

Connects To

• CSSRulePlugin.getRule() (next chapter): the static method used to grab a rule reference.
• CSS core plugin: handles normal per-element style animation and native CSS variable animation.