Daniel Hult Posted November 10, 2019 Share Posted November 10, 2019 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 More sharing options...
GreenSock Posted November 10, 2019 Share Posted November 10, 2019 No, you don't need to register CSSPlugin - that's baked into the core. And yes, gsap is the replacement for TweenMax. I can't seem to reproduce the issue - do you have an "a" element in your document? 1 Link to comment Share on other sites More sharing options...
Daniel Hult Posted November 10, 2019 Author Share Posted November 10, 2019 Okay, I figured it out. I have to replace the import with this: import { gsap } from "gsap/dist/gsap" Maybe this path could be the default when importing so you don't need to specify the dist folder and then gsap again? 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2019 Share Posted November 10, 2019 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 More sharing options...
Daniel Hult Posted November 10, 2019 Author Share Posted November 10, 2019 Sure! Im using webpack to bundle all my files, so it shouldn't be too old Where would I send you the files? Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2019 Share Posted November 10, 2019 You can private message me or just post a link here - either way is fine. And yeah, Webpack should work fine right out of the box with the defaults. I'm very confused as to why you'd need to use the /dist/ files. Link to comment Share on other sites More sharing options...
GreenSock Posted November 10, 2019 Share Posted November 10, 2019 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! 2 Link to comment Share on other sites More sharing options...
Daniel Hult Posted November 11, 2019 Author Share Posted November 11, 2019 No worries! Glad I could help Excited to try the new version of GSAP Link to comment Share on other sites More sharing options...
OSUblake Posted November 12, 2019 Share Posted November 12, 2019 On 11/10/2019 at 4:42 PM, GreenSock said: 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. What was going on? Can you show me? Link to comment Share on other sites More sharing options...
GreenSock Posted November 12, 2019 Share Posted November 12, 2019 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 More sharing options...
OSUblake Posted November 12, 2019 Share Posted November 12, 2019 Right, I was just wondering about his wepack setup, because the CSSPlugin was never dropped in any of my tests. Link to comment Share on other sites More sharing options...
Arnost Posted January 21, 2020 Share Posted January 21, 2020 Hi @GreenSock and @OSUblake, I'd like to reinvestigate this issue. I have started bumping into this issue working with Nuxt in production mode. Development runs fine, but in production the CSSPlugin seems to get tree-shaken. I've produced a minimal repro case here: https://github.com/ParallelUniv3rse/gsapBugRepro I'll be happy to help any way I can Link to comment Share on other sites More sharing options...
GreenSock Posted January 22, 2020 Share Posted January 22, 2020 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? 1 Link to comment Share on other sites More sharing options...
Arnost Posted January 23, 2020 Share Posted January 23, 2020 Yes, referencing CSSPlugin fixed it, but moving to the new syntax will be better. Old habits die hard I guess 😁 Thanks for mentioning that, I would have not guessed the new syntax would make a difference! Link to comment Share on other sites More sharing options...
GreenSock Posted January 23, 2020 Share Posted January 23, 2020 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? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now