[Scroll Trigger Scroller-Start and End are scrolling with content]

Oof, thank you. Looks like I need to roll my sleeves up. It felt weird, it was partially working but the parts that weren't working didn't make sense. I blame the Timeline.

Thank you sooo much!

[Scroll Trigger Scroller-Start and End are scrolling with content]

I'm working on a portfolio redesign and I'm having difficulty with the Scroll Trigger. The scroller-start and end are moving with the content on the second panel.  Any advice is much appreciated!

https://codesandbox.io/s/divine-star-pzpqtn?file=/src/routes/index.svelte

[Sveltekit with gsap and scrollTrigger]

I can confirm it is working on Netlify using this method
 

<script>
  import { gsap } from 'gsap/dist/gsap.js';
  import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js';

...
</script>

 

[Sveltekit with gsap and scrollTrigger]

Very weird @chimp1nski. I don't want to refactor it now, but we're about to add it to another project so hopefully it won't be an issue in that one.

Thanks for letting me know

[Sveltekit with gsap and scrollTrigger]

Until this gets sorted by Vite or Netlify, my work around is a `LoadScript.svelte` component:

<script>
  import { onMount } from 'svelte';

  export let src;
  export let callback = () => {};
  let mounted = false;
  export let externalJSReady = false;

  if (!src) {
    console.warn('No src provided for the script tag');
  }

  if (!callback) {
    console.warn('No callback provided for the script tag');
  }

  onMount(() => {
    // The page is ready.
    mounted = true;
    if (externalJSReady) {
      callback();
    }
  });

  function jsLoaded() {
    console.log(`js ready!`);
    // The external javascript is ready.
    externalJSReady = true;
    if (mounted) {
      callback();
    }
  }
</script>

<svelte:head>
  <script {src} on:load={jsLoaded}>
  </script>
</svelte:head>

Then you use it like this:

<LoadScript
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"
  bind:externalJSReady={gsapReady}
/>
<LoadScript
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"
  bind:externalJSReady={scrollTriggerReady}
/>

I added the externalJSReady and callback in case I need them, but it seems to work without.

[Sveltekit with gsap and scrollTrigger]

This works locally but is failing on build for me on Netlify. I'm getting the following error:

6:18:51 AM: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/opt/build/repo/node_modules/gsap/dist/gsap' imported from /opt/build/repo/.svelte-kit/output/server/entries/pages/new.svelte.js

6:18:51 AM: Did you mean to import gsap/dist/gsap.js?

6:18:51 AM: at new NodeError (node:internal/errors:371:5)

6:18:51 AM: at finalizeResolution (node:internal/modules/esm/resolve:394:11)

6:18:51 AM: at moduleResolve (node:internal/modules/esm/resolve:944:10)

6:18:51 AM: at defaultResolve (node:internal/modules/esm/resolve:1041:11)

6:18:51 AM: at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)

6:18:51 AM: at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)

6:18:51 AM: at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)

6:18:51 AM: at link (node:internal/modules/esm/module_job:78:36)

6:18:52 AM: Creating deploy upload records

6:18:51 AM: > 500 /new

6:18:51 AM: at file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index2.js:983:11

6:18:51 AM: at save (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index2.js:1203:4)

6:18:51 AM: at visit (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index2.js:1094:3)

6:18:51 AM: at processTicksAndRejections (node:internal/process/task_queues:96:5)

6:18:52 AM: 

6:18:52 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)