felixbaumgaertner

Okay I got it working in my main project now. The solution was to use onMount(), which I thought was optional, and import + register ScrollTrigger as you already suggested because it works as a dependency. I've updated the code I posted here to the working version: <script lang="ts"> import { onMount } from "svelte"; import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { ScrollSmoother } from "gsap/dist/ScrollSmoother"; gsap.registerPlugin(ScrollTrigger, ScrollSmoother); onMount(() => { ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1 }); }); </script> <div id="smooth-wrapper"> <main id="smooth-content"> <slot /> </main> </div> The error message threw me way too much off, thank you guys very much!

Here I've added gsap.from like I did in another project: https://codesandbox.io/s/sveltekit-gsap-scrollsmoother-minimal-demo-iu3o60?file=/src/routes/__layout.svelte Seems like I have used onMount() back then already to make sure the DOM elements have definitely been loaded.

You are right Cassie I had to remove and install gsap-trial again to make it work correctly. Now really using gsap-trial, that mistake was on my end. So now the error changed to: TypeError: U.content is not a function at Function.t.create (/sandbox/node_modules/gsap-trial/dist/ScrollSmoother.js:13:14207) at eval (/src/routes/__layout.svelte:18:39) at Object.$$render (/sandbox/node_modules/svelte/internal/index.js:1745:22) at eval (/.svelte-kit/generated/root.svelte:50:126) at $$render (/sandbox/node_modules/svelte/internal/index.js:1745:22) at Object.render (/sandbox/node_modules/svelte/internal/index.js:1753:26) at render_response (file:///sandbox/.svelte-kit/runtime/server/index.js:1223:27) at async respond_with_error (file:///sandbox/.svelte-kit/runtime/server/index.js:2680:10) at async respond$1 (file:///sandbox/.svelte-kit/runtime/server/index.js:2934:4) at async resolve (file:///sandbox/.svelte-kit/runtime/server/index.js:3306:11)

Thanks for you effort Cassie, I really appreciate it! In your pen you try to import from "gsap-trial/dist/gsap", but the installed module is at "gsap/dist/gsap" - just fyi. I will look into your linked posts, but I think I've already read them before opening my own post. Maybe it's the way I try to use it so I will try relying on "onMount" next.

Hey Cassie, thanks for your reply! I've switched to the gsap-trial package, the pen now works without bad gateway bugs. I also ran the pen successfully on another device to confirm it is working.

Thanks for the quick response! I've reproduced it based on the codesandbox starter you provided: https://codesandbox.io/s/sveltekit-gsap-scrollsmoother-minimal-demo-iu3o60?file=/src/routes/__layout.svelte For me the error doesn't always show up (I'm new to codesandbox.io), so if you run yarn start in a new terminal and refresh the embedded browser it should work. Whilst debugging this I've also found the following error thrown right before the first mentioned error ("_mainInstance.content is not a function") appeared: Cannot read property 'utils' of undefined TypeError: Cannot read property 'utils' of undefined at _getTarget (/sandbox/node_modules/gsap/dist/ScrollTrigger.js:138:17) at Function.ScrollTrigger$1.getScrollFunc (/sandbox/node_modules/gsap/dist/ScrollTrigger.js:2524:27) at new ScrollSmoother (/sandbox/node_modules/gsap/dist/ScrollSmoother.js:118:38) at Function.ScrollSmoother.create (/sandbox/node_modules/gsap/dist/ScrollSmoother.js:762:109) at __layout.svelte:16:16 at Object.$$render (/sandbox/node_modules/svelte/internal/index.js:1745:22) at root.svelte:37:37 at $$render (/sandbox/node_modules/svelte/internal/index.js:1745:22) at Object.render (/sandbox/node_modules/svelte/internal/index.js:1753:26) at render_response (file:///sandbox/.svelte-kit/runtime/server/index.js:1223:27) Also I removed my module installation token from the .npmrc after installation, just to hide it from public.

I've already successfully used gsap core functions in another SvelteKit project, so now I wanted to use plugins for the first time. I registered and upgraded to the ShockinglyGreen license, then followed the installation guide via npm. My code is based on the example code for ScrollSmoother. <script lang="ts"> import { gsap } from "gsap/dist/gsap"; import { ScrollSmoother } from "gsap/dist/ScrollSmoother"; gsap.registerPlugin(ScrollSmoother); ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1 }); </script> <div id="smooth-wrapper"> <main id="smooth-content"> <slot /> </main> </div> The above code produces the following error when using npm run dev: TypeError: _mainInstance.content is not a function at ScrollSmoother.create (/home/fb/projects/fb.de/node_modules/gsap/dist/ScrollSmoother.js:762:51) at eval (/src/routes/__layout.svelte:15:39) at Object.$$render (/home/fb/projects/fb.de/node_modules/svelte/internal/index.js:1758:22) at eval (/.svelte-kit/generated/root.svelte:50:126) at $$render (/home/fb/projects/fb.de/node_modules/svelte/internal/index.js:1758:22) at Object.render (/home/fb/projects/fb.de/node_modules/svelte/internal/index.js:1766:26) at render_response (file:///home/fb/projects/fb.de/.svelte-kit/runtime/server/index.js:1223:27) at async respond_with_error (file:///home/fb/projects/fb.de/.svelte-kit/runtime/server/index.js:2678:10) at async respond$1 (file:///home/fb/projects/fb.de/.svelte-kit/runtime/server/index.js:2932:4) at async resolve (file:///home/fb/projects/fb.de/.svelte-kit/runtime/server/index.js:3304:11) When I searched for this error I couldn't find anything related. Am I just missing something simple? How can this be fixed? Also I'm not familiar with posting my error on a forum, so if there is more information needed or if this is the wrong place to ask for help I'm happy about any information.

Thanks for the code examples! I just figured there is a small mistake in the following example. It's missing a comma after "normalizeScroll: true". ScrollSmoother.create({ content: "#smooth-content", wrapper: "#smooth-wrapper", smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements normalizeScroll: true // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies ignoreMobileResize: true // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding });