CSSRulePlugin does not work in Tween

[reynaldysaputra]

Hi gsap developer, I have a problem with a plugin that I want to use, it doesn't work, I have followed the rules in this documentation but when I run it, it doesn't work. why is it not working, did i do something wrong?

This is the source code link, the problematic project folder is in src/2.PluginTraining/01_cssRulePlugin/apps.jsx

https://codesandbox.io/s/sleepy-meadow-4nmzv?file=/src/2.PluginTraining/01_cssRulePlugin/apps.jsx

[bitworking]

The CSSRulePlugin works a little bit different. I have to think about if I could make it work more declarative and how we could use the "Controls" component for this Tween, but for now you could use it like this:

import React, { Fragment, useRef, useEffect } from "react";
import style from "./style.module.css";
import { CSSRulePlugin } from "gsap/dist/CSSRulePlugin";
import gsap from "gsap/gsap-core";
import { Controls, PlayState, Tween, Timeline } from "react-gsap";

gsap.registerPlugin(CSSRulePlugin);

function CssRulePlugin() {
  const ref = useRef(null);
  useEffect(() => {
    const rule = CSSRulePlugin.getRule("::after");
    gsap.to(rule, { duration: 3, cssRule: { backgroundColor: "blue" } });
  }, []);

  return (
    <Fragment>
      <Controls playState={PlayState.pause}>
        <Tween duration={0.5}>
          <div className={`${style.box} ${style.box1}`}>BOX 1</div>
        </Tween>
      </Controls>
    </Fragment>
  );
}

export default CssRulePlugin;