How do I get a global SmoothScroller working with ScrollTrigger in individual components?

[ladyofcode]

Hello! I caved the other day and now I'll be doing a LOT of GSAP 😆

 

Background: I tried replicating the Fake Scroll (Horizontal) demo and integrating it with SmoothScroller on a Svelte/Sveltekit site. It works on CodePen, and similar it works if I stick the SmoothScroller code inside the Horizontal component.

Problem: I rather have the SmoothScroller in layout.svelte, because I'm using it across the *entire* site. If I stick it inside the Horizontal component, other things on the page break. If I have both a global and local component instance, other items on the page jitter (I'm assuming the SmoothScrollers are in conflict over the elements). Most of the other components play nicely going forwards (not in reverse or on resize, but that's another problem 😅).

 

I have attempted to replicate the issue with a minimal demo on StackBlitz. It's not exactly the same, but it is similar, so I'm hoping that perhaps someone shedding either some light on how that should work or best practices will help me solve my initial issue.  The issue I'm seeing on StackBlitz is that the full number of sections isn't showing; it is similar on my local site, except that it also disappears VERY quickly and there's a ton of space down the page where the animation should be scrolling. One thing at a time, I guess.

 

Help would be immensely appreciated!

 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi @ladyofcode and welcome to the GSAP Forums!

 

I forked your demo and updated the gsap trial version (running npm i -s gsap-trial in a new terminal on stackblitz) and I don't see anything that jitters:

https://stackblitz.com/edit/sveltejs-kit-template-default-vjaxrz?file=src%2Flib%2FHorizontalScroller.svelte,src%2Fapp.css

 

Also the reason for not seeing all the elements is because you copied all the styles from our ScrollSmoother demo that uses elements with position absolute, so those are taken from the documents flow and there is no scroll available because of that, once you remove that you can scroll all the way down (as you can see in the forked demo, see the app.css file). Also I changed scrub: 1 to scrub: true, since there is no need for that when using ScrollSmoother.

 

If you can tell us exactly what is jittery and how to reproduce the issue it'd be great.

 

Finally thanks for being a GSAP Club member and supporting GSAP! 

 

Hopefully this helps.

Happy Tweening!

[ladyofcode]

Hi Rodrigo!

 

Thank you kindly! I meant to reply sooner with updates - apologies. Travel followed by illness got the best of me.

 

After you mentioned the Stackblitz worked I created a new repo from scratch. That was immensely helpful. I started transferring all my components over. I got the Horizontal Scroller one working as well. I'm currently having trouble with this one.

 

I originally had used the svg with position:fixed, but as I'm using ScrollSmoother I tried to convert the pin to a ScrollTrigger. It won't scroll to the bottom. Would you happen to know how I can make it do that?

 

My local version won't actually scroll - it jumps from the top of the page to the bottom of the page (at least the path is drawn, so I know DrawSVG is working). I can't replicate that behaviour in the Stackblitz even though I created a second minimal demo locally with the single component added (I made the Stackblitz from this). It doesn't jump if I disable ScrollSmoother in +layout.svelte though.

[Rodrigo]

Hi,

 

I don't see any ScrollSmoother in your demo and neither an element with position: fixed

 

One of the caveats of ScrollSmoother is that elements with position fixed should be outside the smoother wrapper:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/#caveats

 

But since ScrollSmoother is integrated with ScrollTrigger you can use pinning like you'd do in any other normal setup, so there is no need for position fixed inside the wrapper.

 

We have this demo that uses ScrollSmoother in a SvelteKit app:

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

 

I'm not really well versed in Svelte/SvelteKit yet, but for what I've seen and played with it, I really like it. Hopefully in the future we'll be adding more demos to our collections in order to better help our users.

 

Happy Tweening!