Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mimeartist

DOMException

Recommended Posts

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"}});

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

  • 11 months later...
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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

 

 

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.
×