'Uncaught Cannot tween a null target' using CSSRulePlugin

[renrique]

Hey Guys!   

I've recently discovered your awesome products and have been enjoying playing around with the examples. 
However, I've run into some trouble trying to implement it into my project haha. Yet confident this won't be a biggie for you guys. 

 

So , if it's not too much of a bother please take a look at the codepen attached to see what I mean.

 

*Specifically, I keep getting the error 'cannot tween a null target' in the console , which stops all my other animations from running , when trying to use the CSSRulePlugin to target the :before pseudo element. 

 

*I've noticed that this error occurs and can be seen in the console both on codepen AND when doing local development without a server, but for some reason works when I'm developing it locally using XAMP. *   

 

 

Cheers,

 

Raul.

See the Pen jmwXxp by Raulito (@Raulito) on CodePen

[Jonathan]

Hello renrique and welcome to the GreenSock Forum!

 

Your getting that error due to not having the CSS Rule .about__wrapper:before in your CSS.

 

Which is also not reflected in the DOM. Even when i remove all JS, i still do not see the CSS Rule .about__wrapper:before in the CSS or markup when generated on page load. Or even see it in the compiled version of the SASS generated CSS.

 

You must have that CSS rule .about__wrapper:before present in your CSS in order for CSSRulePlugin to tween that target.

 

So make sure you add that .about__wrapper:before CSS rule in your CSS so CSSRulePlugin can find that CSS rule.

 

Also keep in mind that when using the CSSRulePlugin that you must use the older single-colon syntax ( : ) and not the newer double-colon ( :: ) syntax for pseudo-elements i your CSS and in your JS when selecting that CSS rule.

 

[renrique]

My apologies I hadn't even indented the CSS properly within the Codepen editor.Hence missing .about__wrapper:before  rule.

 

I've made the changes you suggested and the example works fine on CodePen and when developing locally using XAMPP.

 

Yet, I'm still curious as to why I still continue getting the 'Uncaught Cannot tween a null target' error.' when working locally without using a server i.e. file:///C:/Users/Owner/Downloads/ExampleProject/index.html.  even when implementing the changes suggested.

 

Appreciate the help. Any clarification would be appreciated. Thanks.

 

[Jonathan]

When testing locally make sure that CSS :before rule exist in the HTML markup using the browser inspector. If you dont see it.. then that means if your using SCSS, that it is not compiling your CSS properly.