Jump to content
GreenSock

Anam0927

CSSRulePlugin not registering class selectors

Recommended Posts

Hey! I've recently started using gsap and was trying to animate the links for a header. I've realised that the animation works fine if the  I use 'a'  as selector. But if  I  use  '.linkto1' or any other class,  the  plugin doesn't work.

 

I was actually trying to animate the before  pseudo-elements on a  but while trying various things, I figured out that classes were not being registered.  How do I fix this?

See the Pen YzpYzav by Anam0927 (@Anam0927) on CodePen

Link to comment
Share on other sites

I tend to prefer this approach, using CSS variables.

 

  .link {
    --bg: white;
    &:before {
      content: ' ';
      background: var(--bg);
    }
  }

gsap.to('.link', { '--bg': 'red'})

 

Here is basic CSSRule setup.

 

See the Pen dba304e8190c5bb6cef611c819f3f91f?editors=1010 by dadacoded (@dadacoded) on CodePen

 

image.png.02067ce11fa97234b27510e00d556453.png

 

Here are some issues:

• not getting the :before pseudo selector with your getRule

• animating the wrong property (color instead of background)

  • Like 1
Link to comment
Share on other sites

Hey Anam0927 and welcome to the GreenSock forums.

 

55 minutes ago, Anam0927 said:

I've realised that the animation works fine if the  I use 'a'  as selector. But if  I  use  '.linkto1' or any other class,  the  plugin doesn't work.

This is simply because of the way that CSS works. If you add the same rule directly into your CSS, you will see that it's being overwritten by more specific (or later in the CSS document) styles. That's one of the reasons why we don't recommend using the CSSRulePlugin in most cases but instead recommend animating properties of elements directly (i.e. using a regular tween with a "regular", meaning not pseudo-element, target) or animating CSS variables instead. 

 

41 minutes ago, tailbreezy said:

I tend to prefer this approach, using CSS variables.

Make sure to loop through each instance to do this sort of thing:

See the Pen qBqpdOW?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Side notes:

  • I highly recommend my article about animating efficiently.
  • It's proper to use a double colon (::) for pseudo-elements as long as you don't need IE9 support. Given CSS variables don't work in IE9 you should be using double colons if you use the above approach.
  • Like 2
Link to comment
Share on other sites

37 minutes ago, ZachSaucier said:

If you add the same rule directly into your CSS, you will see that it's being overwritten by more specific (or later in the CSS document) styles.

So, how exactly does CSSRulePlugin work? Does it add the styles inline in the HTML just like normal GSAP?

I didn't understand why classes are not being selected...

Link to comment
Share on other sites

Just now, Anam0927 said:

how exactly does CSSRulePlugin work? Does it add the styles inline in the HTML just like normal GSAP?

Nope. The CSSRulePlugin adds the CSSRule to your stylesheet. This makes it less performant and harder to override your normal styles than using a regular GSAP tween.

Link to comment
Share on other sites

I see... I guess I'll just use CSS variables then since it's also easier

 

Thanks for the help

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.
×