Jump to content
Search Community

Issue with CSSRule Plugin (DOMException)

Biscuite test
Moderator Tag

Recommended Posts



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();

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.

  • Like 1
Link to comment
Share on other sites

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! ;)

  • Like 3
  • Thanks 1
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...