Jump to content
Search Community

CSSRulePlugin works in one case, not on another...

Yaniv Nagar test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all,

I've been having some issues with CSSRulePlugin, hope you can help me figuring out what's wrong :)


I have these two codepens:

 

See the Pen bKZgPG by trueicecold (@trueicecold) on CodePen

 

 

See the Pen rKRPBZ by trueicecold (@trueicecold) on CodePen

 

You can see the first one works fine by finding "before" and "after" pseudo elements, but the second one returns undefined for getRule...

Am I doing something wrong? ?

 

Thanks!

Link to comment
Share on other sites

So... I figured out the problem, although I'm not sure if it's a CSSRulePlugin bug, or just the way document.stylesheets work.

I just changed:

 

CSSRulePlugin.getRule(".level_number:before");

 

to:

 

CSSRulePlugin.getRule(".header .level_number:before");

 

I'd think the inner div selector should work by itself...

 

I've also verified the first example, if I put a wrapper around it, both DOM and scss, getRule doesn't work for it.

Link to comment
Share on other sites

Some more tests:

 

I've replaced:

 

pseudo = (selector.charAt(0) === ":"),

 

With:

 

pseudo = (selector.indexOf(":") > -1),

 

in the CSSRulePlugin.js (momentarily, of course), and it seems to work for all levels. I KNOW it will target ALL elements with the ".level_number:before" selector, but for my use it's suitable.

 

I'd suggest adding another parameter to the CSSRulePlugin.getRule - "loose (true/false) - default false" and switch between those lines :)

 

As for multiple CSSRulePlugin elements tween, I put them inside an array. Since CSSRulePlugin returns an array, I then used flatten on the resulting array.

Link to comment
Share on other sites

Hello @Yaniv Nagar and welcome to the GreenSock Forum!

 

This is not a bug, but your targeting a CSS Rule that does not exist in your compiled CSS. You must match the CSS Rule exactly, meaning use the same CSS Rule selector in your compiled CSS in your CSSRulePlugin getRule().

 

Your issue is that your asking GSAP CSSRulePlugin to find a specific selector, but your not giving the same selector as shown in your CSS. If you look closely your SCSS CSS when compiled show this as your selector:  .header .level_number:before not .level_number:before which is why it fails

 

// The CSS rule in your compiled CSS
.header .level_number:before

// But you are trying to target this CSS rule which is not exactly in your compiled CSS
.level_number:before

// They dont match that is why it fails. So please use like you were doing
CSSRulePlugin.getRule(".header .level_number:before");

 

So you want to make sure that your GSAP selector for the rule is the same as whats in your CSS rule selector.

 

As a rule of thumb when using the CSSRulePlugin you want to always use the exact CSS Rule selector since that is what your trying to animate, that exact CSS rule in your CSS.

 

Happy Tweening! :)

 

  • Like 4
Link to comment
Share on other sites

Thanks for the reply, @Jonathan, I've already come the the conclusion it's not a bug, after looking at my compiled scss, but this causes somewhat bloated code: I know, in MY specific case, that there's only one element with that selector, and that's the one I'm targeting. In my opinion, giving the plugin a jquery-like behavior would benefit lots of users, while keeping the current behavior intact :)

 

Also, the fact that CSSRulePlugin can only support one selector is also somewhat cumbersome, and a separator for multiple selectors would be greatly appreciated :)

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