Treeshaking Plugin Issue

[sandman]

Hello,

I'm using Svelte with Rollup to bundle my production app.  I'm using ScrollTrigger and getting a warning that the plugin is not registered.  If I import and register the plugin and use ScrollTrigger like this: ScrollTrigger.create({}).  The plugin  will get registered in the production build.  If I use ScrollTrigger as scrollTrigger inside a gsap animation, even though I am using gsap.registerPlugin(ScrollTrigger);  Rollup seems to be deregistering the plugin.

[ZachSaucier]

Hey sandman. That's pretty weird that it would treeshake it if you're doing that...

 

Can you please create an absolute MVP of the issue and share it with us? It could be a CodeSandbox, a series of steps to create a project, or a ZIP/repo. We're not very familiar with Svelte.

[sandman]

So I just reversed the way that I had the ScrollTrigger set up.  Instead of putting the scrollTrigger inside of the animation, I put the animation inside of the ScrollTrigger.create({animation:...}) and it is now working.  I'm not sure if I'd be able to use a timeline with this setup though.  I'll try to set something up later to reproduce the issue.

[GreenSock]

Well that makes zero sense to me - Rollup dumps ScrollTrigger with tree shaking even if you have your own code calling gsap.registerPlugin(ScrollTrigger)? I don't think I've ever seen something like that. 

 

Even if your setup requires that you use ScrollTrigger.create(...), you can totally use a timeline. The "animation" that you feed into the ScrollTrigger.create() can be a tween or a timeline. Doesn't matter. I'm still super curious to see your setup and how Rollup is tree shaking code that you're directly referencing. So weird!

[jSwtch]

This is working for me :

 

<script>
  import { gsap } from "gsap";
  import { ScrollTrigger } from "gsap/ScrollTrigger";
  import { onMount } from "svelte";

  const init = () => {
    //gsap...
  };

  onMount(() => {
    gsap.registerPlugin(ScrollTrigger);
    init();
  });
</script>

 

[sandman]

@jSwtch  I tried your method and I'm still getting an error: Invalid property scrollTrigger set to Object.

 

I'm not sure it this makes a difference but I was using Sapper.  I also tried with Routify but I'm getting the same error.

[ZachSaucier]

Hey @sandman. Can you please try to recreate the error using CodeSandbox or something?

[GreenSock]

Yeah, like Zach said it's almost impossible for us to troubleshoot blind. The error you're getting means that ScrollTrigger isn't registered. You're either using an old version or your build process is dumping ScrollTrigger before it's even registered with GSAP which, frankly, I've never heard of before. I strongly suspect there's an issue on your end but we can't know for sure if we can't reproduce the problem. 

[sandman]

It works in the CodeSandbox...  I guess the issue is on my end.  I'm using GSAP 3.3.0.  

[sandman]

I updated to 3.3.4 and it looks like it is working!!!  Simple fix!  Thanks.