Jump to content
Search Community

GSAP SvelteKit Build problems

SarunasDaunoras test
Moderator Tag

Recommended Posts

Hi Everyone, hope someone can help me out. I have been struggling with this for a while.

I can't seem to deploy gsap with an npm install.

I tried adding the .js like mentioned in the previous posts, but as soon as I do that, I get errors on ScrollTrigger.create ?

if I don't use the js, I get the error during build process.

Any suggestions?

gsap.png

Link to comment
Share on other sites

Sorry, I'm not familiar with Svelte or your particular build process. It's super difficult to troubleshoot without being able to reproduce the error on our end. Have you tried using a relative path to the files? It looks like your editor is hinting at the need for that, like "./gsap/dist/ScrollTrigger.js" for example (I have no idea what your actual folder structure looks like...maybe it'd be more like ./node_modules/gsap/dist/ScrollTrigger.js")

Link to comment
Share on other sites

10 hours ago, GreenSock said:

Sorry, I'm not familiar with Svelte or your particular build process. It's super difficult to troubleshoot without being able to reproduce the error on our end. Have you tried using a relative path to the files? It looks like your editor is hinting at the need for that, like "./gsap/dist/ScrollTrigger.js" for example (I have no idea what your actual folder structure looks like...maybe it'd be more like ./node_modules/gsap/dist/ScrollTrigger.js")

 

Found the solution. Just in case anyone else has the same problem, here is the code:

 

import { browser } from '$app/env';
import { onMount } from "svelte";
 
  onMount(async () => {
    if (!browser) { return; }
    const { gsap } = await import('gsap');
    const { ScrollTrigger } = await import('gsap/ScrollTrigger');
    gsap.registerPlugin(ScrollTrigger);

 

P.S. Not sure if I should create another post or not, so I'll just ask here. ScrollTrigger gets messed up when navigating the page. It seems that maybe it continues to run? If I refresh the page it goes back to working as it should.

 

EDIT: is using refresh() in the end the correct thing to do?

ScrollTrigger.refresh();

 

  • Like 1
Link to comment
Share on other sites

If you navigate to a new page in a SPA you're technically not refreshing the page, the content is just changing - so you'll likely need to call scrollTrigger.refresh() 

 

I'm not quite sure about this particular snipper - it's hard to understand without context which is why we ask for minimal demos.

Glad you got it sorted though! If it works it works

Link to comment
Share on other sites

1 hour ago, Cassie said:

If you navigate to a new page in a SPA you're technically not refreshing the page, the content is just changing - so you'll likely need to call scrollTrigger.refresh() 

 

I'm not quite sure about this particular snipper - it's hard to understand without context which is why we ask for minimal demos.

Glad you got it sorted though! If it works it works

It almost works with the scrollTrigger.refresh :) there is still an occasional flicker. I'm kinda new to svelte and all the js stuff still. What would be the best place to make a demo that would work with sveltekit?

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.
×
×
  • Create New...