Issue with CSSRule Plugin (DOMException)

[Shahriar]

Hello ,

I include local file <script src="js/CSSRulePlugin.min.js"></script> but still now it's not working. there are two error 

DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

GSAP target undefined not found. https://greensock.com . I need to target span:after so i have  locally  included CSSRulePlugin. i also included locally gsap <script src="js/gsap.min.js"></script>

 

 

 

index.html

[ZachSaucier]

Hey Shahriar and welcome to the GreenSock forums.

 

1 hour ago, Shahriar said:

DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

That's a browser-level restriction that's there for security reasons. You can't edit stylesheets that are loaded from other domains. I recommend hosting the CSS file on the same site that you have your script if you need to do that.

 

What I actually recommend though is editing the styles so that you no longer have to edit the pseudo-element's CSS. We recommend either animating CSS variables instead or, if you need IE support, then making the pseudo-element a real element and animating that like you would any other element with GSAP. More details can be found in the CSSRulePlugin docs. 

[Shahriar]

Thank you so much 

[diepnangngan]

Well, this is also my case. Thanks Shahriar for asking issue with cssrule.

[howeller]

I am getting this same error with the plugin file hosted next to (or even inside a <script>) the banner document. No idea what's triggering a CORS from a single file. There's no errors on my pen below when I reference a CDN, but the error occurs on my web server & locally. Are browsers getting stricter or is there something about using it locally I am missing?

See the Pen gOxRMEP by howeller (@howeller) on CodePen

[OSUblake]

No idea as that would be a server issue. I would try another plugin and see if the problem persists. If it's just with the CSSRulePlugin, then the problem is probably related to it not being able to parse/update the rules, which some browsers might block for security. 

 

It would probably be better to use CSS variables instead of the CSSRulePlugin as it gives you more control and you can target elements individually.