Separator Posted June 18, 2022 Share Posted June 18, 2022 Hi there, Im trying to animate a pseudo element in my React (Nextjs) app but i get an error using CSSRulePlugin. I import the plugin like this: import { CSSRulePlugin } from "gsap/dist/CSSRulePlugin"; and then trying to use it like this: gsap.registerPlugin(CSSRulePlugin); let checkboxRipple = CSSRulePlugin.getRule( `.checkbox-wrapper #${[id]}:after` ); gsap.to(checkboxRipple, { cssRule: { scale: 1.75, opacity: 0, }, duration: 2, }); but i get the error you see in the attached screenshot. Any help? Link to comment Share on other sites More sharing options...
PointC Posted June 18, 2022 Share Posted June 18, 2022 I'm not really sure what the problem is there, but I just wanted to point out that most of the time, using CSS variables is a much easier way to handle pseudo elements. No CSSRule plugin required. Here's a basic wired-up example. See the Pen rNpXXWq by PointC (@PointC) on CodePen Hopefully that helps. Happy tweening. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted June 18, 2022 Share Posted June 18, 2022 Yep, it looks like your rule is malformed or something - I believe it's returning undefined. And like @PointC said, we almost always recommend using CSS variables instead now since pretty much every major browser supports that feature natively. That's stated in the CSSRulePlugin docs as well. In general, I think it's a cleaner option personally. 👍 1 Link to comment Share on other sites More sharing options...
Separator Posted June 18, 2022 Author Share Posted June 18, 2022 Thank you, this is better indeed! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now