Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Hult

GSAP 3 css

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? :) 

Share this post


Link to post
Share on other sites

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? 

  • Like 1

Share this post


Link to post
Share on other sites

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?

  • Thanks 1

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

Sure! Im using webpack to bundle all my files, so it shouldn't be too old :D 
Where would I send you the files?

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

No worries! Glad I could help :D 

Excited to try the new version of GSAP :) 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Right, I was just wondering about his wepack setup, because the CSSPlugin was never dropped in any of my tests.

Share this post


Link to post
Share on other sites

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 :) 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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! 

Share this post


Link to post
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

Share this post


Link to post
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.

×