Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kreativzirkel

ScrollToPlugin not working with gsap v3 and vue-cli

Recommended Posts

I get the following error when trying to scrollTo with GSAP v3.0.2:

 

gsap-core.js?5806:3410 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.
    at PropTween._setterFunc [as set] (gsap-core.js?5806:3410)
    at PropTween._renderComplexString [as r] (gsap-core.js?5806:3447)
    at Tween.render (gsap-core.js?5806:3188)
    at _lazyRender (gsap-core.js?5806:187)
    at _lazySafeRender (gsap-core.js?5806:200)
    at updateRoot (gsap-core.js?5806:2563)
    at eval (gsap-core.js?5806:1212)
    at Array.forEach (<anonymous>)
    at _tick (gsap-core.js?5806:1211)

 

I replicated the issue in a codesandbox: https://codesandbox.io/s/long-violet-etmz7

(also not working in the standalone app: https://etmz7.csb.app/)

 

With v2 it is working in this codesandbox (and in my project): https://codesandbox.io/s/gsap-v2-scrollto-working-ugbhj

(Weirdly, inside the sandbox it's not working, but when you look at the standalone app, it is working: https://ugbhj.csb.app/)

 

Did I find a bug here?

Share this post


Link to post
Share on other sites

Looks like you just forgot to register the plugin and the bundler was applying tree shaking and dumping the plugin completely. Just add this once: 

gsap.registerPlugin(ScrollToPlugin);

:)

  • Like 1

Share this post


Link to post
Share on other sites

You are right, with registerPlugin it works:

https://codesandbox.io/s/gsap-v3-scrollto-working-with-registerplugin-ynirn

 

Why does it work in GSAP v2 without registering?

And why does logging `ScrollToPlugin` work then? (I'm not that familiar with tree shaking)

 

The linter-rule "no-unused-vars" applies here aswell, so it makes sense that tree shaking drops it down the line. But why didn't GSAP v2 drop it?

 

There is a docs article for registerPlugin, but I couldn't find any mentioning on the scrollToPlugin docs page. Wouldn't it make sense to add a link there aswell?

 

Where would you suggest to put the `registerPlugin` function; would it be okay to do it on a component level, so that there will probably be multiple `registerPlugin`-assignments of `ScrollToPlugin`?

Share this post


Link to post
Share on other sites

I can't speak to how vue-cli works internally or why it may or may not drop v2 stuff but I can tell you that one of the reasons we encourage people to register plugins in v3 is exactly for this reason (tree shaking) - bundlers were dropping v2 plugins completely so that plugin-driven animations were breaking. We'd have to encourage people to reference the plugins somewhere in their code to prevent bundlers from dropping them, but a lot of people didn't do that.

 

Another reason we encourage registering in v3 is because it allowed us to streamline things in the core - in v2 and earlier, we had to add various code to try to work around issues with people loading things in various orders (like what if they loaded a plugin and then the core?). It just solves a lot of issues. 

 

And again, the tree shaking issues have NOTHING to do with GSAP itself - it's not like there's a bug that's causing things to get dropped. It's the nature of tree shaking and what these bundlers do to try to "help" you. :)

 

It's totally fine if you register a plugin multiple times (though it doesn't help at all). So if you prefer to registerPlugin() in each component, that's fine. Technically you only need to register a plugin once after GSAP loads.  

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for the in depth reply; 

 

Only thing bothering me now is: Can we reflect that suggestion (necessaty by now) more in the v3 docs? 

At the top of the ScrollToPlugin Docs page is a red box with "how to install", leading to the installation page, where plugin registration is only mentioned in one comment of a code example that doesn't deal with plugins primarily. So this change gets overlooked rather easily I'd say.

 

My suggestion is: 

at the end of every plugin docs page, add the following paragraph (or something similar)

And maybe also add a designated paragraph to the "Installation Page" for more clarity?

 

What do you think? 

 

Register Plugin in bundler environments (like webpack, vue-cli or create-react-app) 

In order to prevent tree shaking to drop your plugins and satisfy the linting rule "no-unused-vars", you must explicitly register the plugin with gsap.registerPlugin(ScrollToPlugin, PixiPlugin, MotionPathPlugin) – see https://greensock.com/docs/v3/GSAP/gsap.registerPlugin()

  • Like 1

Share this post


Link to post
Share on other sites
23 hours ago, kreativzirkel said:

Where would you suggest to put the `registerPlugin` function; would it be okay to do it on a component level, so that there will probably be multiple `registerPlugin`-assignments of `ScrollToPlugin`?

 

That is what I would recommend. Or you could make a single file to do all the registering, and just export what you will actually reference from that file. It gives you a nice centralized place to register and keep track of what plugins you are using, and streamline your code a bit. 

 

my-gsap.js

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { TextPlugin } from "gsap/TextPlugin";

gsap.registerPlugin(Draggable, ScrollToPlugin, TextPlugin);

// No need to export ScrollToPlugin or TextPlugin
// as you probably won't need to reference them directly
export { gsap, Draggable };

 

my-component.js

import { gsap, Draggable } from "./my-gsap.js"; // Make sure you import from the file you created

gsap.to("#foo", { text: "Some Text" }); // Works
gsap.to(window, { scrollTo: 400 }); // Works

Draggable.create("#bar");

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks Blake! I'm gonna use this pattern :)

 

What about changing the docs? Any thoughts on that?

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, kreativzirkel said:

What about changing the docs? Any thoughts on that?

 

I've suggested the same thing numerous times. ?‍♂️

 

  • Like 1

Share this post


Link to post
Share on other sites
1 minute ago, kreativzirkel said:

What about changing the docs? Any thoughts on that?

The docs were updated a couple of days ago to include a FAQ section at the bottom of each non-core plugin page that addresses this question and others :) Let us know if you think they're not satisfactory.

  • Like 1

Share this post


Link to post
Share on other sites

I fricking luv it– 

except: there seems to be a copy&paste issue :D – 2 passages called `FAQ` with the first one talking about the GSDevtools. https://greensock.com/docs/v3/Plugins/ScrollToPlugin

 

I hope you keep the typo/formatting styles of the "real FAQs" – find them more readable.

As a designer, the typo spacings hurt my heart! :D The big headline `Frequently Asked Questions (FAQ)` has more spacing to the bottom than to the top; if the fix doesn't involve too much, I'd suggest flipping the values.

 

Since I'm always complaining, I'd like to get constructive here. If there's a way I can help you with the styling / docs in general, I'd gladly do it!

Share this post


Link to post
Share on other sites

I completely agree with you, @kreativzirkel on every count. @ZachSaucier will get those fixed up shortly I'm sure. 

 

Please don't hesitate to share suggestions/corrections like this in the future. They're very welcome around here (no need to feel bad). ?

Share this post


Link to post
Share on other sites

Thanks for the bug catch and suggestions, @kreativzirkel! I made the changes. You might need to hard refresh to see them.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×