Jump to content
Search Community

ScrollToPlugin not working with gsap v3 and vue-cli

katerlouis test
Moderator Tag

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?

See the Pen by s (@s) on CodePen

Link to comment
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`?

Link to comment
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
Link to comment
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
Link to comment
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 4
Link to comment
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!

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