Jump to content
Search Community

'Uncaught Cannot tween a null target' using CSSRulePlugin

renrique 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

Hey Guys!  :-D 

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. *  :huh:  :huh:






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

Link to comment
Share on other sites

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.



  • Like 5
Link to comment
Share on other sites

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.



  • Like 1
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...