Issue with CSSRule Plugin (DOMException)

[Biscuite]

Hello,

 

I'm playing around with GSAP for the first time. After a few minutes i already encounter a problem (god bless.)

I need to target .menu:before and .menu:after so i've installed CSSRule plugin.

This five lines of code return a DOMException:

 

const tl = gsap.timeline();

gsap.registerPlugin(CSSRulePlugin);
const menuBefore = CSSRulePlugin.getRule('.menu:before')
const menuAfter = CSSRulePlugin.getRule('.menu:after')

tl.from(menuBefore, {
    cssRule: {
        width: 0
    },
    duration: 1
});

Firefox Dev Edition: DOMException: "CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet"

Chrome: CSSRulePlugin3.min.js:10 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Object.getRule (https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js:10:1094)
    at http://localhost:8000/js/animations.js:13:33

 

So, i obviously made a mistake but i can't tell where.

Any help is appreciated.

[GreenSock]

Seems to work fine here: 

See the Pen f7c9bd29637e0768d0579a37a76d9b7e?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Based on the error you pasted here, I think the problem is that you're loading CSSRulePlugin from a server (https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js) into your local file, but the browser won't let it access the CSS styles due to cross-origin security restrictions. If you just load CSSRulePlugin locally, it should work fine. Basically, load it from wherever your page is. So if it's on a server, load it from there; if it's local, load it locally. 

 

Does that clear things up? 

 

Have fun with your learning adventures! I think you're gonna dig GSAP once you learn the basics. It can be addictive. Tween responsibly!

[Biscuite]

Oh yeah! I knew it was a CORS restriction but couldn't tell the problem.

Yes that clear things up. Thank you for your help!