DOMException

[mimeartist 26 Likes (Newbie)]

Hi, I'm getting a DOMException when trying to use CCSRules - my code is below... I originally thought perhaps it was because my gsap files were on an external CDN so bought them in locally - but still getting this error - 

 

CSSRulePlugin.min.js:10 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

 

iconRule = CSSRulePlugin.getRule(".hover_icon:hover"); //get the rule
gsap.to(iconRule, {duration: 3, cssRule: {color: "#ff00ff"}});

buttonRule = CSSRulePlugin.getRule(".hover_button:hover"); //get the rule
gsap.to(buttonRule, {duration: 3, cssRule: {color: "#ffff00"}});

 

[ZachSaucier 7,152 Likes (Superhero)]

Hey mimeartist. I'm guessing this is because of the permissions on your stylesheet itself or something along those lines. Can you please create a minimal demo to show the issue?

[mimeartist 26 Likes (Newbie)]

See the Pen LYpMVzx by mimeArtist (@mimeArtist) on CodePen

 

I created a codepen, but of course it works there

[ZachSaucier 7,152 Likes (Superhero)]

Why are you attempting to change the CSS rule anyway? In most cases it's better to just set the property on each element using a regular tween.

[OSUblake 18,492 Likes (Superhero)]

28 minutes ago, mimeartist said:

CSSRulePlugin.min.js:10 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

 

Are you using a server? You can't use the plugin just running a local file.

[mimeartist 26 Likes (Newbie)]

I was trying to target an href inside a div that has a load of other stuff so though It was easier to do it that way - however just figured a way to target it directly - thanks for all your help - not always keen to just try a different way and give up route, but that is kind of what i did anyway

[Jim Nayzium 9 Likes (Newbie)]

On 5/19/2020 at 12:05 PM, OSUblake said:

 

Are you using a server? You can't use the plugin just running a local file.

If I download the .js files and load them locally instead of CDN will that skirt these permission issues? I am loading mine locally and got the same error with the same CSSRulePlugin.

 

I am attempting to change the rule because of simplicity. It may be better to do a tween instead on the property, I am not sure.

 

I need my divs to go from flex-direction: column; to flex-direction:row.

 

I thought about just making entire separate classes, and using jquery to do it, but it was a way to start learning and using GSAP so I gave it a shot. Then got the same permssion issue.

 

I am for sure on a local.testingonmymachine.com though so I my first question above is still in play. THANKS!

[GreenSock 18,577 Likes (Superhero)]

9 hours ago, Jim Nayzium said:

If I download the .js files and load them locally instead of CDN will that skirt these permission issues? I am loading mine locally and got the same error with the same CSSRulePlugin.

I'm not sure - it runs perfectly fine for me locally, so I think we'd need a minimal demo to troubleshoot if you're still having problems. I wonder if it's because you're trying to edit a CSS rule that's in a sub-loaded .css file instead of on that's in a <style> tag of the actual page itself. 

 

Honestly, it's quite rare that you'd need to use CSSRulePlugin these days. If you can't just tween the element properties directly with normal tweens, typically it's best to use CSS variables. 

 

9 hours ago, Jim Nayzium said:

I need my divs to go from flex-direction: column; to flex-direction:row.

 

I thought about just making entire separate classes, and using jquery to do it, but it was a way to start learning and using GSAP so I gave it a shot. Then got the same permission issue.

Are you trying to animate between those states? jQuery definitely won't let you do that. Most animation tools won't, but it's a perfect place for the new Flip plugin: 

See the Pen zYqLjre by GreenSock (@GreenSock) on CodePen

 

Have fun!

[Jim Nayzium 9 Likes (Newbie)]

HOLY HECK THATS EXACTLY what I want to do -- (at first glance!) I hope you are right! 

And yes, I think I figured out the permissions thing by setting the style inside the page also. 

And yes, I also abandoned the the RULE plugin for the variable as my first method of solving it, but then couldn't understand the chart link under the --myVar tutorial that I clicked that said, "browser support is pretty good these days." It felt like there was a LOT of red on that chart, so I thought it could be the type of solution that only worked for "a lot" versus "most" browsers!

 

I will try out the flip plugin for sure!! Looks perfect.