Fixed position of an element during scroll using ScrollSmoother

[Denev 1 Likes (Newbie)]

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.

 

 

[Rodrigo 5,895 Likes (Superhero)]

Hi @Denev and welcome to the GreenSock forums!

 

I'm not very familiar with Svelte and SvelteKit but the I really like it based on the few things I've checked about it.

 

One option could be use the navigating app store to check route changes in order to kill the ScrollSmoother instance when navigation starts and create it again when navigation finishes.

https://kit.svelte.dev/docs/modules#$app-stores-navigating

 

Another option could be the navigation module:

https://kit.svelte.dev/docs/modules#$app-navigation

 

As per using fixed elements, you can definitely use the pin functionality in ScrollTrigger with pinSpacing set to false and give the pinned element and others the corresponding z-index and position values in order to make it work as expected.

 

Finally we have this starter template for using ScrollSmoother in SvelteKit, you can fork it in order to create a minimal demo that shows exactly the issue you're having:

https://stackblitz.com/edit/sveltejs-kit-template-default-dvnud9

 

Hopefully this helps.

Happy Tweening!

[Denev 1 Likes (Newbie)]

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