Jump to content
Search Community

Identical code but "Cannot tween a null target." on pseudoelements

Andrew Harris 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

I keep getting the error "uncaught exception: Cannot tween a null target." when hovering one of the buttons in this codepen demo i've created, the animation is applied to a pseudoelement, and it looks all correct to me. The second button in the demo works, but the first doesn't for some reason.

 

Originally the two buttons were different, one with the styling i wanted to apply alongside the animation, but i kept getting this exception, so i chipped away at all the additional styling and animations until i was left with this bug.

 

The markup, js and styling is practically identical, except with a different classname and id for the elements.

 

Does anyone know why this would be happening?

 

Thank you!

See the Pen pMgKBr by andrewmumblebee (@andrewmumblebee) on CodePen

Link to comment
Share on other sites

Hello @Andrew Harris and Welcome to the GreenSock Forum!

 

The reason it is not animating is if you look at your compiled SASS CSS, the selector #t1:after does not exist.

 

I only see #t2:after and #t3:after in your compiled SASS CSS. Once you add #t1:after CSS rule inside your CSS, then you should not get that console error.

 

You must make sure that the same exact CSS Rule your animating with the CSSRulePlugin is also in your CSS, very important ;)

 

I changed #t3:after in your CSS to #t1:after and you can see no errors get thrown.

 

See the Pen EqPdXo by jonathan (@jonathan) on CodePen

 

Here is an example of the GSAP CSSRulePlugin. Notice how i also have the same CSS Rules I'm trying to animate already defined in my CSS, so the CSSRulePlugin can find those CSS Rules to animate? .. Does that make sense ?

 

See the Pen eMLogz by jonathan (@jonathan) on CodePen

 

Happy Tweening! :)

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