csellis

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!

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

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>

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

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.

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)