SvelteKit and GSAP ScrollTrigger Bug

[Tom_S]

Hello,

 

I'm having an issue with SvelteKit and ScrollTrigger. On the second route it's not correctly calculating where the stop and start needs to be, on top of that if I navigate from the homepage but don't active the scrollbar the ScrollTrigger doesn't work at all.

https://www.loom.com/share/11ef7e8080ec4c439d7dee48d32ce6e8

 

In this instance I'm using `use:`

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

export function fadeUp(node: HTMLElement) {
	gsap.registerPlugin(ScrollTrigger);

	const gsapContext = gsap.context(() => {
		gsap.fromTo(
			node,
			{ y: 50, autoAlpha: 0 },
			{
				y: 0,
				autoAlpha: 1,
				scrollTrigger: {
					trigger: node,
					start: 'top bottom',
					end: 'top 70%',
					scrub: true
				}
			}
		);
	});

	return {
		destroy: () => {
			gsapContext.revert();
		}
	};
}

I've tried doing `ScrollTrigger.refresh()` when the page is mounted using `onMount()` but that doesn't fix it either. 

 

I'm really confused what is happening here. Has anyone else come across this before?

[Rodrigo]

Hi @Tom_S and welcome  to the GreenSock forums!

 

This most likely has to do with the fact that you're not properly cleaning up when a specific route gets unmounted. Normally you should use the onMount hook by Svelte and in the return function at the end cleanup your GSAP Context:

onMount(() => {
  const ctx = gsap.context((self) => {
  }, scopeEl); // <- Scope!

  return () => ctx.revert(); // <- Cleanup!
});

Unfortunately I'm not very familiar with Svelte so I can't tell you much based on the code you posted. That seems like a function that is being used somewhere else in your app, but I couldn't tell.

 

If you keep having issues, please create a minimal demo by forking this starter template we have on Stackblitz:

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

 

Hopefully this helps.

Happy Tweening!

[Tom_S]

Hi @Rodrigo,

 

I am cleaning up,

	return {
		destroy: () => {
			gsapContext.revert();
		}
	};

This part of the code reverts the context on destroy. 

 

Thanks,

Tom

[Rodrigo]

Hi,

 

Maybe you're lazy loading some images or have some other tool or code that's messing with the layout, causing issues when ScrollTrigger does its calculations.

 

Maybe wait for the next tick in order to know that the DOM has been updated and rendered. I assume that you're 100% sure that your code in that function is running. Also you're animating the trigger element, that's not a good idea in most cases, specially when animating a property that affects it's position on the y axis. Also I don't see the markers boolean there as well. Always use markers when developing and debugging.

 

Without a minimal demo is really hard for us to tell. Please do your best to create a minimal example that illustrates the issue you're having, don't copy your entire project.

 

Happy Tweening!

[Tom_S]

On 5/6/2023 at 5:06 PM, Rodrigo said:

Hi,

 

Maybe you're lazy loading some images or have some other tool or code that's messing with the layout, causing issues when ScrollTrigger does its calculations.

 

Maybe wait for the next tick in order to know that the DOM has been updated and rendered. I assume that you're 100% sure that your code in that function is running. Also you're animating the trigger element, that's not a good idea in most cases, specially when animating a property that affects it's position on the y axis. Also I don't see the markers boolean there as well. Always use markers when developing and debugging.

 

Without a minimal demo is really hard for us to tell. Please do your best to create a minimal example that illustrates the issue you're having, don't copy your entire project.

 

Happy Tweening!

 

Hi Rodrigo, 

 

I'm still having this issue, I decided to not implement scroll trigger on an internal page, but in this case it is really detrimental to project. 

I've done a screen recording which seems to give some understanding of what is going off here;

 

https://www.loom.com/share/6ccf5d1d978241a68b30dabc48fde49d

 

It seems like SvelteKit does the following;

1. Appends the new page under the current page.

2. Moves the scroll position to the top of the screen.

3. Hides the current page.

 

This means `onMount` is calculating the scroll positions right at the bottom. I'm unsure whether this is a bug with SvelteKit as I've only recently come across this issue. But I think that is what is happening here. 

 

 

EDIT FIX:

If you are using Svelte Transition at any point, use `|local` so `use:transition|local` without `local` it will try and animate between pages.

[Rodrigo]

Hi,

 

Thanks for providing information about this.

 

I'm not all that familiar with Svelte Transition yet, but normally other frameworks like Vue or packages like React Transition Group, have explicit in/out animation types for routes, so that allows you to move out a page before moving the other. Also they include ways to tell the Transition component/function that the animation is completed in order to, once the page transition is done, create your GSAP instances at a normal state soto speak and not midway the page transition animation.

 

Happy Tweening!