Jump to content
Search Community

CSSRule Undefined In Chrome, FF Fine

d1ch0t0my test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,


I'm using the CSSRule plugin and have run into an issue that seems only present in Chrome. FF and Safari are fine. In my stylesheet I have the following rule:

.cloned:after {content: '';position: absolute;z-index: -1;width: 100%;height: 100%;opacity: 0;box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);}

...and in my script I have the following:

shadow = CSSRulePlugin.getRule(".cloned:after");

(...referenced in a timeline later as below)

.to(shadow, 0.4, {cssRule:{opacity:1}}, 0.5)

On Firefox and Safari if I print out to console.log I see the rule as expected and everything works fine yet in Chrome I see: "Undefined" and then "Uncaught Cannot tween a null target" which halts the animation due to the error.


If there was an error in the code surely FF and Safari would pick it up as well but they have no issue. It's Chrome specific.


I'm literally on my way out the door so will make a codepen when i get back in a couple of hours, apologies for not doing now. Thanks!


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