CSSRulePlugin return undefined in NEXTJS(REACT) when i try get element using className

[nahueldev23]

I import

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

and register them

gsap.registerPlugin(CSSRulePlugin);

 

im trying get rules..

```

 

useEffect(() => {
  
      const rule = CSSRulePlugin.getRule(`.listItem:before`);

      console.log(rule); //undefined
      r.current = rule;
    
  }, []);

 

if i try get only using :before all works...

 

 <ListItem
                _before={{
                  position: "absolute",
                  bottom: 0,
                  left: 0,
                  right: 0,
                  height: "1px",
                  content: "''",
                  backgroundColor: "white",
                  transform: "scaleX(0)",
                }}
                className="listItem"
                onMouseEnter={onHoverList}
                onMouseLeave={onLeaveList}
              >
                Developers
              </ListItem>

some ideas?

[Rodrigo]

Hi @nahueldev23 and welcome to the GreenSock forums!

 

The CSS Rule Plugin has been deprecated and the recommendation is to use CSS variables instead:

https://greensock.com/docs/v3/Plugins/CSSRulePlugin

 

Also I'm noticed that you are using React. Please take a look at GSAP Context which is super useful in a GSAP + React environment:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally if you keep having issues, please remember to include a minimal demo in your threads in order to get a better idea of what the issue could be. For frameworks like React you can easily create a simple project using codesandbox or stackblitz.

 

Happy Tweening!

[nahueldev23]

thx u @Rodrigo i can solved!