React with Greensock - Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)

user_11681774 0
Viewed 2028

I'm trying to do a reveal image effect with Greensock and React.js but i'm getting a warning related to the CSS Plugin.

First of all, i need to get the rule of the pseudo element that i want to animate for the reveal effect

  const imageReveal = CSSPluginRule.getRule("#image-container:after");

And the next step is to animate the width 

 tl.to(container.current, 1, { css: { visibility: "visible" } }).to(
      imageReveal,
      1.5,
      { css: { width: "0%", ease: Power2.easeIn } }
    );

The animation is not working and i'm wondering if the problem is because of this warning: 

Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)
gsap reactjs frontend css javascript
1 Answers

This error is occurring because you did not import and register CSSRulePlugin, just as the warning says. You do not have to register CSSPlugin because it's part of GSAP's core. To import and register CSSRulePlugin, include the following at the top of your script:

import { gsap } from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";

gsap.registerPlugin(CSSRulePlugin);

I highly recommend using GSAP's Install Helper until you get comfortable with the importing/registering format.

Side note, you don't need to explicitly use the css object inside of tweens most of the time. GSAP detects that it's a DOM object and attempts to use the CSSPlugin if it recognizes it as a DOM object. visibility is also not an animatable property, so you should use a .set() instead:

tl.set(container.current, { visibility: "visible" })
.to(imageReveal, { duration: 1, cssRule: { width: "0%" }, ease: "power2.in" });

Note that you use the cssRule object to affect something obtained using .getRule Also note that I also used the condensed string form for the ease so you don't have to import that as well. It's better to use scaleX instead of width if you can because using transforms doesn't cause reflow like changing the element's width does.

GSAP's docs should be able to answer most questions like this going forward :)

Also note that we at GreenSock don't recommend using CSSRulePlugin in most cases. Instead we recommend animating actual elements (not pseudo-elements) or animating CSS variables.

user_20657020
Related