Jump to content
GreenSock

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

ScrollSmoother error "_mainInstance.content is not a function" with SvelteKit

Go to solution Solved by felixbaumgaertner,

Recommended Posts

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.

Link to comment
Share on other sites

First of all, welcome to Club GreenSock

 

That error sounds quite strange actually. It's difficult to troubleshoot without a minimal demo. Could you provide one please so that we can reproduce the error on our end? It almost sounds like somewhere in your code you've got ScrollSmoother() called (as a function). I'm also curious if you tried loading and registering ScrollTrigger because that's a dependency of ScrollSmoother. In other words, you should gsap.registerPlugin(ScrollTrigger, ScrollSmoother). 

 

If that doesn't help, definitely post a minimal demo and we'll take a peek. You're welcome to use CodeSandbox for the minimal demo. Here's a starter with Svelte: https://codesandbox.io/s/gsap-svelte-starter-cbvtv

 

The simpler the better - please do NOT post your whole project. A few colored <div> elements with the necessary ScrollSmoother code is perfect.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

I'm still pretty lost I'm afraid. Your demo's still using the old GSAP imports.

I've changed your imports in this one but with your setup I can't even get GSAP to work properly, let alone the plugins. I'm not quite sure how to move forward as I don't really know svelte or sveltekit.

 

Maybe this thread will help?
 


or this one?
 

 

  • Like 1
Link to comment
Share on other sites

Hopefully someone with more svelte knowledge may be along in a bit! 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

You switched it over to the gsap-trial package though so it shouldn't be using that GSAP module anymore

1 hour ago, felixbaumgaertner said:

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.


If you're still using the normal GSAP package on codesandbox then scrollSmoother won't work because it's a club plugin. It's only available through gsap-trial on codesandbox

Link to comment
Share on other sites

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)
  • Like 1
Link to comment
Share on other sites

Lets just step back a bit and ignore scrollSmoother for now - You say you had to remove and install to make it work 'correctly'

Can you get a GSAP tween working with the GSAP-trial package and your setup? Because I can't get your demo working even with the core GSAP-trial package 

 

If you can could you give me a link to the working demo?
 

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

Ah glad we you got there in the end!

  • Like 1
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.
×