Jump to content
Search Community

CSSRulePlugin not picking up complex rules

Rob 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

There seems to be an issue with the CSSRulePlugin with complex rules.

The getRule method returns null so you get the "Uncaught Cannot tween a null target." error

 

Looking the plugins source, it looks like it should work fine.

I'm using Chrome 31 & Firefox 26, not tried anything else.

 

Here's an example with the issue.

See the Pen hcDey by raldred (@raldred) on CodePen

Link to comment
Share on other sites

Hi Rob,

 

If you pass in the complete rule,

var rule = CSSRulePlugin.getRule('#story-mi6 #mi6-scene-4 .construction-cement .construction-cement-pour:before');

It looks like it works fine: http://codepen.io/GreenSock/pen/vnqiB

 

Whereas it seems you were just using one of the many classes that was part of the full rule.

var rule = CSSRulePlugin.getRule('.construction-cement-pour:before');

I'm pretty sure the CSSRulePlugin requires the full string representation of the CSSRule you mean to target.

 

Does that make sense? If not I can get you more info.

  • Like 3
Link to comment
Share on other sites

Hi again,

I've just come across a small issue with the plugin, it seems that it's possible "cssRules" property can be null, this isn't handled.

 

Seems like there's some junk rules objects jquery has in their source

 

CSSStyleSheet {rules: null, cssRules: null, ownerRule: null, media: MediaList, title: null…}
cssRules: null
disabled: false
href: "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
media: MediaList
ownerNode: link
ownerRule: null
parentStyleSheet: null
rules: null
title: null
type: "text/css"

 

I get Uncaught TypeError: Cannot read property 'length' of nullTweenMax.CSSRulePlugin.js:58

 

Looks like you added a try catch in 1.10.0 but it need to check that curSS is valid before using it.

Something like this maybe?

 

while (--i > -1) {
    //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch.
    try {
        curSS = ss[i][ruleProp];
        if(!curSS) throw new TypeError("Rule object null");
    } catch (e) {
        console.log(e);
        continue;
    }
    j = curSS.length;
    while (--j > -1) {
        cs = curSS[j];
        if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) { //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out.
            if (pseudo) {
                a.push(cs.style);
            } else {
                return cs.style;
            }
        }
    }
}
Link to comment
Share on other sites

Additionally I don't seem to be able to get it working with fromTo

It seems to completely ignore the from property values, it always starts from 0 regardless of the from values or any existing rules in the stylesheets

 

TweenMax.fromTo(rule, 2,
{
  cssRule: {
    rotation: 180
  }
},
{
  cssRule: {
    rotation: "+=180_cw",
    repeat: 20,
    ease: Linear.easeNone
  }
})

 

See the Pen xrslz by raldred (@raldred) on CodePen

Link to comment
Share on other sites

Hello Rob,

 

Try adding the special property immediateRender: false to your tween.

TweenMax.fromTo(rule, 2,
{
  cssRule: {
    rotation: 180
  },
  immediateRender: false // add this special property
},
{
  cssRule: {
    rotation: "+=180_cw",
    repeat: 20,
    ease: Linear.easeNone
  }
})

This is due to from tweens having immediateRender set to true by default

 

immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

 

does that help? :)

Link to comment
Share on other sites

Hey Rob.. i found this reply on another Topic from Jack, regarding the CSSRulePlugin:

 

Jack's Reply:

http://forums.greensock.com/topic/6133-is-it-possible-to-tween-css-pseudo-elements-like-after/?view=findpost&p=21795

 

Link to whole Topic:

http://forums.greensock.com/topic/6133-is-it-possible-to-tween-css-pseudo-elements-like-after/

 

see if the above links help?

Link to comment
Share on other sites

  • 2 years later...

If you use webpack with SCSS or LESS, you need extract CSS select string with ID that webpack added. For the sake of the example:
I have selector: 

#contacts-wrapper .animated-btn:before

So, webpack compile it with particular ID in something like:

#contacts-wrapper .animated-btn[_v-5061616a]:before

You can see it in dev tools. Therefore you need write in code this way:

CSSRulePlugin.getRule('#contacts-wrapper .animated-btn[_v-5061616a]:before')
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...