sandman Posted June 16, 2020 Share Posted June 16, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 16, 2020 Share Posted June 16, 2020 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. Link to comment Share on other sites More sharing options...
sandman Posted June 16, 2020 Author Share Posted June 16, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 16, 2020 Share Posted June 16, 2020 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! Link to comment Share on other sites More sharing options...
jSwtch Posted June 20, 2020 Share Posted June 20, 2020 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> 1 Link to comment Share on other sites More sharing options...
sandman Posted June 23, 2020 Author Share Posted June 23, 2020 @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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 23, 2020 Share Posted June 23, 2020 Hey @sandman. Can you please try to recreate the error using CodeSandbox or something? Link to comment Share on other sites More sharing options...
GreenSock Posted June 23, 2020 Share Posted June 23, 2020 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. 1 Link to comment Share on other sites More sharing options...
sandman Posted June 23, 2020 Author Share Posted June 23, 2020 It works in the CodeSandbox... I guess the issue is on my end. I'm using GSAP 3.3.0. Link to comment Share on other sites More sharing options...
sandman Posted June 23, 2020 Author Share Posted June 23, 2020 I updated to 3.3.4 and it looks like it is working!!! Simple fix! Thanks. 2 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