Jump to content
Search Community

Invalid scaleY tween of 0 Missing plugin? gsap.registerPlugin()

DesignCourse test
Moderator Tag

Recommended Posts

Hey all,

I'm trying to animate an :after selector with the CSSRulePlugin, but I can't get it to work.  I've linked the codepen, and I've tried adding `gsap.registerPlugin(CSSRulePlugin);' but it still is giving me that error.  I'm sure it's a simple issue, but I've tried forum searching/Google and can't find the solution.

 

Thanks!

See the Pen gOOjeyg by designcourse (@designcourse) on CodePen

Link to comment
Share on other sites

Hi @DesignCourse and Welcome to the GreenSock forum!

 

Also keep in mind with the CSSRulePlugin, that you want to keep using the old single colon syntax ( : ) when using the pseudo-elements of  :after and :before like in your codepen. This way you don't have to worry about issues if you use the new double colon syntax ( :: ) of pseudo-elements.

 

Happy Tweening :)

  • Like 1
Link to comment
Share on other sites

I've come across another issue/question -- stagger doesn't seem to be working with this setup (there are 3 spans):

var rule = CSSRulePlugin.getRule("span:after");
gsap.to(rule, {cssRule: {scaleY: 0}, duration: 1stagger: .5});

They're all animating at the same time

Link to comment
Share on other sites

3 minutes ago, DesignCourse said:

I've come across another issue/question -- stagger doesn't seem to be working with this setup (there are 3 spans):

CSSRulePlugin affects the actual stylesheet, so you can't affect individual elements (unless they have their own selector and you use that selector). Does that make sense? span:after has to apply to all elements that match it because that's the way that CSS works.

 

Most likely it's easiest to make it a real element and use a regular (non-CSSRulePlugin) tween if you need to do this.

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