[Strange error on refresh SvelteKit (only in production)]

Appologise for the late reply.

 

Thank you for looking into it. I really appreciate the effort and the swift problem solving!

[Strange error on refresh SvelteKit (only in production)]

51 minutes ago, GreenSock said:

That sounds very odd to me - GSAP doesn't care if you register the same plugin a bunch of times. Can you provide a minimal demo (like a Stackblitz) that illustrates the issue? Here's one where I registered ScrollTrigger a bunch of times and it seems to work fine, but I'm sure I must be missing something: 

https://stackblitz.com/edit/sveltejs-kit-template-default-eddyvv?file=src%2Froutes%2F%2Bpage.svelte

 

I can see that you have registered the the plugins multiple times in the same page. The problem arises when you register the same plugins in diferent routes of the same app. The strange thing is that the problem is only there when you build the app. In dev mode everything works fine.

 

Here is a slightly tweaked version so you can check the issue. Dont forget to test it not in dev but in prevew (npm run build - npm run preview).

After you navigate to the about page and you refresh it, you will see that the error occurs.

https://stackblitz.com/edit/sveltejs-kit-template-default-mp1jyy?file=package-lock.json

 

 

Here is also a video of the issue:

http://api.fragment.bg/uploads/Screen_Recording_2023_04_25_at_23_17_48_34045ba8b1.mov

 

I assume it has something to do with the bundling process of Vite.

[Strange error on refresh SvelteKit (only in production)]

t

[Strange error on refresh SvelteKit (only in production)]

Solved! For whoever experiences the same issue, here is the deal. In production you get an error if you register the same plugin in different pages. So what I did is - I imported all the necessary plugins and registered them in the main layout component, so there is no duplication. This solved the issue for me.

[Strange error on refresh SvelteKit (only in production)]

Hi there,

 

I am having a very bizzare issue. I am almost done with a project on SvelteKit, which uses GSAP for animations. Everything was going perfectly well, untill I built the production version. After deployment everything seemed to work fine - all pages load and the appropriate animations are there. However, when you try to reload a page (other than the home page), the following error occurs.

 

Uncaught (in promise) TypeError: (intermediate value).gsap is undefined
    Immutable 19

 

Because of the fact that the problem occurs only in production (only when I run the npm run build), and it is perfect when I run npm run dev, I was not sure how to show you this instance with a CodePen.

 

So here is a simplified version of the  http://stagger.fragment.bg. And here is the link to the GitHub repo https://github.com/kodes-agency/fragment-test.

 

Here is a video that ilustrates the issue: http://api.fragment.bg/uploads/Issue_0_21_798db83bc7.mov

 

I am really clueless why this happens. I will appreciate every input into how to solve this issue.

[Fixed position of an element during scroll using ScrollSmoother]

Rodrigo, thanks a lot. Your suggestion really helped to go through the issue.

[Fixed position of an element during scroll using ScrollSmoother]

Hello lovely people, I am quite new to GSAP so excuse me if the question is kinda silly. I have the following problem. I am using SvelteKit for my current assignment. I decided to add ScrollSmoother to the pages (because its freaking amazing). In order to avoid adding it to the layout of every possible route, I used it in the main layout component, so every page is affected by it. So far so good, everything works fine, but as expected in the pages that I have a fixed position of an element it is all messed up. I have went through the docs, and I know that fixed elements must be placed outside the smooth-wrapper, but with the current setup thats not possible.

 

So here is the question. Is there a way to mimic the same effect of a fixed image as a background with something like a pin. Or do I have to find a way to call ScrollSmoother for every single route differently, even though this will cause unneeded redundency.

 

Here is what I want to achieve, but with ScrollSmoother.

But as you might expect, this is what I get when ScrollSmoother is enabled.

 

I would greatly appreciate your advice!

Thanks in advance.