CODEWITHSUNDEEP
cssreactjsgsap
Idris
Idris

Reputation: 518

GSAP target undefined not found when using CSS Rule Plugin on React Site

I am trying to use the GSAP CSS Rule Plugin to target and animate a pseudo selector. The problem is that it doesn't detect it and logs GSAP target undefined not found to the console. I tried to get the element by logging the element to the console but it is also undefined.

Here is how I am using it:

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

const IndexPage = () => {
  
  useEffect(() => {
    gsap.registerPlugin(CSSRulePlugin);
    const titleRule = CSSRulePlugin.getRule(
      "span.landing__title--span::after"
    )
    // Log titleRule
    console.log(titleRule). // undefined

    const tl = gsap.timeline();
    tl.to(
      titleRule,
      {
        cssRule: {
          scaleY: 0,
          duration: 1
        },
      }
    )
  },[])
  
  return (
    <div>
        <span className="landing__title--span">Hey there</span>
    </div>
  )
}

export default IndexPage

What am I doing wrong and how do I rectify it? Thanks in advance

Upvotes: 0

Views: 1338

Answers (1)

Idris
Idris

Reputation: 518

I finally found the reason it wasn't working. When you use CSSRulePlugin, you have to be very specific about your selectors.

The selector you use in the getRule() heavily depends on the selector you use in your CSS (cause it will change this specific rule).

If in your CSS you're e.g. using landing__title--span::after and you reference span.landing__title--span::after in getRule(), it won't work. The selector in the getRule() has to be match with the selector in your css because that's what it wants to overwrite.

So in your css, if your style goes like this:

.landing__title--span::after {
  /*Yout styles*/
}

Your getRule has to be defined like this:

const titleRule = CSSRulePlugin.getRule(
  ".landing__title--span::after"
)

Upvotes: 5

Related Questions