Jump to content
Search Community

GSAP 3 css

Daniel Hult test
Moderator Tag

Recommended Posts

Hi!

I just installed gsap 3 in a test project with

npm install gsap

 then import with 

import gsap from 'gsap'

And used the following syntax:
 

gsap.to('a', {
    duration: 1,
    y: 50,
})

This throws this error in the console:
 

Invalid y tween of 50 Missing plugin? gsap.registerPlugin()



Do I need to register a plugin to use the normal css properties? I though the gsap object was a replacement for TweenMax. Am I wrong? :) 

Link to comment
Share on other sites

Hm, is there any chance you could shoot me a reduced test case so I can see your setup/configuration? The only reason you may need to use the /dist/ directory is if you're using and older bundler or something that doesn't understand ES modules. Or, of course, if you're loading the file(s) directly into the browser in a <script> tag that doesn't have type="module". I'm very curious to see your setup, though. 

Link to comment
Share on other sites

I got the private message - thanks so much! That was very helpful in identifying the issue. 

 

Your build process was very aggressively tree-shaking, so even though gsap.registerPlugin(CSSPlugin) was called inside the main index.js file, it was dumping it. Doh! That didn't happen in any of our other tests with bundlers like Webpack, etc. I figured out a way to put a stronger protection in place against tree shaking, so if you just update to 3.0.1 you should be good-to-go. 

 

Sorry about the confusion there. Thanks again for the example. Let us know if you notice anything else. 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

1 minute ago, OSUblake said:

What was going on? Can you show me?

Yep, CSSPlugin was getting dumped during the build in his setup even though the GSAP index.js had gsap.registerPlugin(CSSPlugin) in it. I figured out a way to work around it though, @OSUblake, so we should be fine now. You can see it in GSAP's index.js file in Github if you're curious. To be clear, the user did NOT have any gsap.registerPlugin(CSSPlugin) in his code (he shouldn't have to, of course). I was talking about GSAP's index.js module.

Link to comment
Share on other sites

  • 2 months later...

Thanks for the reduced test case!

 

It looks like the issue is that you referenced neither gsap nor CSSPlugin anywhere in your code - you only referenced TweenMax. I can add an extra level of protection for CSSPlugin in that scenario in the next release. But for now, you can either move to the newer GSAP 3 syntax (use "gsap" instead of "TweenMax") or reference gsap or CSSPlugin somewhere in your code. That seemed to fix it for me - does it work for you? 

  • Like 1
Link to comment
Share on other sites

3 hours ago, Arnost said:

I would have not guessed the new syntax would make a difference! 

The syntax actually has nothing to do with it - the issue was simply that the "gsap" object itself was what had a call gsap.registerPlugin(CSSPlugin) in the index.js file, and since you never referenced "gsap" anywhere, your build tool figured it could just dump that variable (and its call to register CSSPlugin). You could leave all your old TweenMax code in place and merely reference "gsap" once and it'd solve the problem. Make sense? 

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