Jump to content
Search Community

Fixed position of an element during scroll using ScrollSmoother

Denev test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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.

 

 

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

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...