Jump to content
Search Community

GSAP target undefined not found when using CSS Rule Plugin in Gatsby

ihollarmide test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Hey there @ihollarmide

 

With the way the CSSRulePlugin works, you will 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 { ... }

 

but then get the rule like this

 

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

 

the target would return undefined. If you'd match them up correctly though, you'll see it work.

 

See the Pen b27138876735fc8ed2177f22e73afa70 by akapowl (@akapowl) on CodePen

 

 

 

@GreenSock is absolutely right though. This was just a shot in the dark, a minimal demo would really help.

 

  • Like 2
Link to comment
Share on other sites

45 minutes ago, akapowl said:

Hey there @ihollarmide

 

With the way the CSSRulePlugin works, you will 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 { ... }

 

but then get the rule like this

 

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

 

the target would return undefined. If you'd match them up correctly though, you'll see it work.

 

 

 

 

 

 

@GreenSock is absolutely right though. This was just a shot in the dark, a minimal demo would really help.

 

Thank you. It worked. The problem was with my css selector. I didn't know it had to match

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...