Jump to content
Search Community

CSSRulePlugin

| GreenSock
79564

Allows GSAP 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 as shown below.

See the Pen CSSRulePlugin by GreenSock (@GreenSock) on CodePen.

Learn more in the CSSRulePlugin documentation. To learn how to include the CSSRulePlugin into your project, see the GSAP install docs.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

Showcases

RXK Studio

RXK Studio
Fave

Fave
Brandium

Brandium
The Maison Of All Victories

The Maison Of All Victories
Ride Out Amsterdam

Ride Out Amsterdam
Dogelon Mars

Dogelon Mars
NINI9

NINI9
View All Submit a Showcase

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock
Go to products

User Feedback

Recommended Comments

GreenSock test

GreenSock 19,614 Likes (Superhero)

Posted

And for the record, yes, CSSRulePlugin is definitely in the NPM package. 

import CSSRulePlugin from "gsap/CSSRulePlugin";

But these days, it's almost always cleaner to just use CSS variables. Every modern browser supports them and GSAP can easily animate them.

  • Like 1
Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...