Jump to content
Search Community

How To Use ScrollTrigger's .scrollerProxy() In Svelte?

ApplePieGiraffe test
Moderator Tag

Recommended Posts

I'm using Svelte, GSAP, ScrollTrigger, and smooth-scrollbar in my website.

 

Everything works fine until I try to add smooth-scrollbar and use the .scrollerProxy() method to make sure the ScrollTrigger animations still work.

 

smooth-scrollbar seems to be okay (e.g., smooth scrolling works and the custom scrollbar is visible), but none of the animations play anymore. 

 

I thought the reason for this was the order in which I was initializing smooth-scrollbar and registering ScrollTrigger and initializing my timelines, but I've tried all sorts of combinations of those things (keeping in mind that I can't do things like initialize smooth-scrollbar until the components of my page are mounted by Svelte) and nothing seems to work. 

 

Has anybody else used ScrollTrigger and .scrollerProxy() in Svelte? Is there a certain way of doing things to ensure that they work?

 

Here's a demo in a Svelte REPL.

  • Like 1
Link to comment
Share on other sites

Hello again!

 

I have had a bit of a lookie. As mentioned, I have not had the chance to work with any of those things yet. Plenty of docs reading...

 

The initial investigation has yielded that part of the reason is because smoothScroll is being initialized at the App.svelte level but the animation is being initialized inside the Hello.svelte. A quick and dirty workaround is to initialize them both at the same scope. I know this is not ideal, it's a first step.

 

I would imagine one will have to set some sort of store to communicate between the components in order to have the smoothScroll at the top level and each component have is own isolated animation. For now I have to stop and "go to work". I'll try to find some time and play around with ScrollTrigger and this SmoothScroll at some point to see if I can work something out.

  • Like 2
Link to comment
Share on other sites

52 minutes ago, Dipscom said:

Hello again!

 

I have had a bit of a lookie. As mentioned, I have not had the chance to work with any of those things yet. Plenty of docs reading...

 

The initial investigation has yielded that part of the reason is because smoothScroll is being initialized at the App.svelte level but the animation is being initialized inside the Hello.svelte. A quick and dirty workaround is to initialize them both at the same scope. I know this is not ideal, it's a first step.

 

I would imagine one will have to set some sort of store to communicate between the components in order to have the smoothScroll at the top level and each component have is own isolated animation. For now I have to stop and "go to work". I'll try to find some time and play around with ScrollTrigger and this SmoothScroll at some point to see if I can work something out.

Thanks for the tip! 😀

 

I gave initializing the scroll animations in App.svelte (after setting up smooth-scrollbar and .scrollerProxy()) a try, and while nothing much seemed to change in my project, the scroll animation plays in the REPL demo that I linked to! The only problem I see now is that the pinning that was set up with ScrollTrigger doesn't work (and the animation seems to be a tad bit choppy).

  • Like 1
Link to comment
Share on other sites

Hey there @ApplePieGiraffe

 

I am not experienced with Svelte, so I can't tell you much about how to handle anything best with that but I have a bit of experience with smooth-scrollbar.

 

3 hours ago, ApplePieGiraffe said:

I gave initializing the scroll animations in App.svelte (after setting up smooth-scrollbar and .scrollerProxy()) a try, and while nothing much seemed to change in my project, the scroll animation plays in the REPL demo that I linked to! The only problem I see now is that the pinning that was set up with ScrollTrigger doesn't work (and the animation seems to be a tad bit choppy).

 

From what I can tell, they are choppy because you forgot to add an EventListener to smooth-scrollbar that updates ScrollTrigger.

 

I added that and now it looks buttery smooth.

 

With regard to the pinning:

If you use the document's body as the scroller, you will have to specify pinType: 'transform' on your ScrollTriggers when pinning, because by default, on the body ScrollTrigger will use pinType: 'fixed' and fixed elements don't work the way you'd expect inside smooth-scrolling containers.

 

Also it looks like you did not specify the scroller. Although it is the body and ScrollTrigger will by default take the body into account as the scroller, I found that it may save you some troubles in combination with smooth-scrollbar and ScrollTrigger still defining the body specifically as the scroller nonetheless.

 

I did both of the afore-mentioned inside of ScrollTrigger.defaults() in this example below.

Does that work better for you?

 

https://svelte.dev/repl/3e2e5f3dfe624c3f81787ac69027a79c?version=3.38.2

 

  • Like 5
Link to comment
Share on other sites

9 hours ago, akapowl said:

Hey there @ApplePieGiraffe

 

I am not experienced with Svelte, so I can't tell you much about how to handle anything best with that but I have a bit of experience with smooth-scrollbar.

 

 

From what I can tell, they are choppy because you forgot to add an EventListener to smooth-scrollbar that updates ScrollTrigger.

 

I added that and now it looks buttery smooth.

 

With regard to the pinning:

If you use the document's body as the scroller, you will have to specify pinType: 'transform' on your ScrollTriggers when pinning, because by default, on the body ScrollTrigger will use pinType: 'fixed' and fixed elements don't work the way you'd expect inside smooth-scrolling containers.

 

Also it looks like you did not specify the scroller. Although it is the body and ScrollTrigger will by default take the body into account as the scroller, I found that it may save you some troubles in combination with smooth-scrollbar and ScrollTrigger still defining the body specifically as the scroller nonetheless.

 

I did both of the afore-mentioned inside of ScrollTrigger.defaults() in this example below.

Does that work better for you?

 

https://svelte.dev/repl/3e2e5f3dfe624c3f81787ac69027a79c?version=3.38.2

 

Thank you very much, @akapowl!

 

The REPL you made works perfectly, so I implemented all of those tips in my project and things are working great, now! As @Dipscom mentioned, I do have to initialize my animations in App.svelte after setting up ScrollTrigger and smooth-scrollbar in order for the animations to play (which, yes, isn't ideal, but I'm just happy that things are working). 😅
 

Just to be clear—do I only have to setpinType: transform if I'm using the body as the smooth-scrollbar container? If I decide to switch to a container within the body for the scroll container instead, should I leave it as pinType: fixed?

  • Like 2
Link to comment
Share on other sites

Right, I got something that might be worth you looking at. I assumed you wanted a shared timeline between the components that are driven by the scrollTrigger. There are some caveats because of component initialisation order and things existing or not on the DOM.

 

The crutial bit is that I assumed you wanted to have each component be able to add to the timeline. For that they need to share a context, which does not happen unless you setup a store or you use getContext()/setContext().

 

https://svelte.dev/repl/d5226741fc304dbfbab2b35a7629c56f?version=3.38.2

 

I'm not too well versed on it to be honest, heck, I only had cause to use it today because of this question of yours. Hopefully I understood it correctly. In any case, have a look a the code, see if it makes sense. What I cannot guarantee is the order in which each of the tweens are going to be added to the timeline as I am not sure if the children components are instantiated in the order they are listed in the code or if it could be random. It should not matter in your case as everything is/should be dependent on the scroll position.

 

ps: Also note you don't need to add imports to many packages in the RELP, it's smart enough to pull them automagically without the need to define script tags in the <svelte:head>

  • Like 5
Link to comment
Share on other sites

48 minutes ago, ApplePieGiraffe said:

Just to be clear—do I only have to setpinType: transform if I'm using the body as the smooth-scrollbar container? If I decide to switch to a container within the body for the scroll container instead, should I leave it as pinType: fixed?

 

Yes and no.

 

Yes, you only have to set pinType to 'transform' when using the body as the scroller, because by default when the body is the scroller, ScrollTrigger will use 'fixed' for the pinType.

 

And no, because you won't leave it as pinType: 'fixed' for a dedicated scroll-container. When you don't use the body as the scroller but a dedicated scroll-container instead, ScrollTrigger's default for the pinType will be 'transform' anyways. So nothing to worry about in that case.

 

Here's the piece about pinType from the docs

 

pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful.
  • Like 3
Link to comment
Share on other sites

Oh, I see—I was creating my timelines in separate file, anyways, then simply importing and instantiating them in different components in my project. For now, I'm just importing and instantiating them in App.svelte instead, and (along with including the rest of the settings and putting things in the correct order) everything's working fine. 👍

 

@Dipscom, @akapowl - Thank you both for your help!

 

  • Like 4
Link to comment
Share on other sites

  • 1 month later...
On 5/13/2021 at 4:27 PM, ApplePieGiraffe said:

Thank you very much, @akapowl!

 

The REPL you made works perfectly, so I implemented all of those tips in my project and things are working great, now! As @Dipscom mentioned, I do have to initialize my animations in App.svelte after setting up ScrollTrigger and smooth-scrollbar in order for the animations to play (which, yes, isn't ideal, but I'm just happy that things are working). 😅
 

Just to be clear—do I only have to setpinType: transform if I'm using the body as the smooth-scrollbar container? If I decide to switch to a container within the body for the scroll container instead, should I leave it as pinType: fixed?

Hey APG! I think I've seen you on Frontend Mentor! Awesome to see you working with Svelte AND GSAP (since I use the same haha).

 

I'm curious how you're using GSAP with Svelte. Are you putting ALL of your ScrollTrigger animations in the App.svelte file?

Link to comment
Share on other sites

1 hour ago, kvncnls said:

Hey APG! I think I've seen you on Frontend Mentor! Awesome to see you working with Svelte AND GSAP (since I use the same haha).

 

I'm curious how you're using GSAP with Svelte. Are you putting ALL of your ScrollTrigger animations in the App.svelte file?

Hey, kvncnls! (I think I remember seeing you on Frontend Mentor, as well! 😆)

 

I actually ended up storing my animations in a separate file and then importing them into App.svelte, which is where I set up ScrollTrigger and smooth-scrollbar. That way, the script tag for App.svelte wouldn't be like a million lines long. 😅  (Here's the repo, if you want to check it out.)

 

This was first time using Svelte and ScrollTrigger together, so there might be a better way to do things, but this worked out okay for this project, I guess. 🙂

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

14 hours ago, ApplePieGiraffe said:

Hey, kvncnls! (I think I remember seeing you on Frontend Mentor, as well! 😆)

 

I actually ended up storing my animations in a separate file and then importing them into App.svelte, which is where I set up ScrollTrigger and smooth-scrollbar. That way, the script tag for App.svelte wouldn't be like a million lines long. 😅  (Here's the repo, if you want to check it out.)

 

This was first time using Svelte and ScrollTrigger together, so there might be a better way to do things, but this worked out okay for this project, I guess. 🙂

Wow, thanks so much for this!! I honestly don't know much about best practices for Svelte or GSAP, let alone combining them, so this was really great to see what clean code looks like. Thanks again!

  • Like 1
Link to comment
Share on other sites

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