Anam0927 Posted February 24, 2021 Share Posted February 24, 2021 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 More sharing options...
tailbreezy Posted February 24, 2021 Share Posted February 24, 2021 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 Here are some issues: • not getting the :before pseudo selector with your getRule • animating the wrong property (color instead of background) 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 24, 2021 Share Posted February 24, 2021 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. 2 Link to comment Share on other sites More sharing options...
Anam0927 Posted February 24, 2021 Author Share Posted February 24, 2021 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 More sharing options...
ZachSaucier Posted February 24, 2021 Share Posted February 24, 2021 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 More sharing options...
Anam0927 Posted February 24, 2021 Author Share Posted February 24, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now