Jump to content
Search Community

LocomotiveScroll + Scrolltrigger + Snap [not work]

Bruno Stephen test
Moderator Tag

Recommended Posts

Hello GSAP family, thank you for using this tool to change my life for the better!
Hope you can help me, I'm trying to use Scrolltrigger with LocomotiveScroll so far my only challenge works well and also implement Scrolltrigger SNAP I know you don't support third party libraries so I was wondering if I missed something or if there is any method I can use to help make it work follows the example in codepen:

 

Example works without locomotivescroll:

See the Pen ExmQYaJ by whoisbrux (@whoisbrux) on CodePen

 

Example does not work with locomotivescroll:

See the Pen xxdpdgb by whoisbrux (@whoisbrux) on CodePen

Link to comment
Share on other sites

7 hours ago, Whoisbrux™ said:

I know you don't support third party libraries

Yeah, exactly. This is more of an issue with LocomotiveScroll and its [apparent?] inability to immediately scroll to a specific place with no smoothing at all. It creates a race condition where ScrollTrigger is trying to do a normal scroll and LocomotiveScroll is intercepting it and being like "no way, buddy, I'm slowing this down and starting over...". 

 

This is why we don't support 3rd party libraries and also why we intentionally designed ScrollTrigger not to do scroll-jacking. :)

 

That being said, you could probably do some fancy footwork and and do the snapping manually by adding a "scrollEnd" event listener and calling LocomotiveScroll's .scrollTo() method: 

See the Pen MWmQKem?editors=0010 by GreenSock (@GreenSock) on CodePen

 

ScrollTrigger.addEventListener("scrollEnd", () => {
	let st = TL.scrollTrigger,
		p = st.start + gsap.utils.snap(1 / (items.length - 1), st.progress) * (st.end - st.start);
	locoScroll.scrollTo(p);
});

I hope that helps. 

 

PS Is there any reason you're not just using the helper function in the docs that does smooth scrolling with only ScrollTrigger (no 3rd party libraries necessary)? 

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Hello thanks for the reply, sorry for the delay I was testing and analyzing the situation.

 

Your alternative seems to work but not so well and I would have to make additional tweaks which can generate a lot of work.

 

To be honest I didn't know that Gsap had its own smooth I thought it was amazing for me it would be a pleasure to use everything from Gsap.

The reason I use another library is because of the documentation, because I didn't know that there was Gsap itself and a good reason is the locomotive's charming scrollbar ( is there any possibility for you to implement it?)

 

That said at the moment I'm open to using smooth Gsap but I did some tests and it didn't work very well with snapTo: label I believe it's because of my old version 3.4.0 correct?

 

probably enough measures have been implemented to date!

 

Below is an example of what I need I will use this often in my projects!

 

See the Pen OJmBawy by whoisbrux (@whoisbrux) on CodePen

Link to comment
Share on other sites

13 minutes ago, Whoisbrux™ said:

a good reason is the locomotive's charming scrollbar ( is there any possibility for you to implement it?)

Personally I absolutely HATE when libraries mess with my browser and override native behavior. We have no plans to implement a custom scrollbar, no. Sorry. I'm curious what you find "charming" about LocomotiveScroll's implementation. 

 

16 minutes ago, Whoisbrux™ said:

I did some tests and it didn't work very well with snapTo: label I believe it's because of my old version 3.4.0 correct?

I'd definitely recommend updating, yes. But I didn't notice any problems in your demo (which uses an updated version) - are you saying you think there are still problems? Is there something else that you didn't think worked well? 

 

The thing about our implementation of smooth scrolling is that it's not truly "scroll-jacking" - it's leveraging native browser behavior and just smoothing it out a bit. My goal is to be very cautious about overriding native browser behavior, as you can probably tell :)

 

If there is anything that you think isn't behaving well in the latest version, please let us know (and provide a minimal demo so we can see the issue in context). Thanks!

Link to comment
Share on other sites

I respect your opinion about messing up the browser.

 

About being charming the implementation of locomotivescroll compared to smooth Gsap the only point that attracts me is the custom scrollbar in the rest using the Gsap toolset is more worthwhile so I will switch to smooth Gsap (remembering that not until then knew there was smooth Gsap).

 

Locomotivescroll has several methods and properties but in my case using the scrolltrigger I don't use practically anything, so it's a basuca to kill an ant.

 

About my demo it's actually perfect and it's really what I need, what didn't work well was the version I'm using for development that is in version 3.4 or I need to upgrade will be a pleasure I love GSAP!

 

Sorry for my confusing text I am using a translator.

 

Thank you for creating this wonder

  • Like 3
Link to comment
Share on other sites

  • 1 year later...
On 7/27/2021 at 11:01 AM, GreenSock said:

Yeah, exactly. This is more of an issue with LocomotiveScroll and its [apparent?] inability to immediately scroll to a specific place with no smoothing at all. It creates a race condition where ScrollTrigger is trying to do a normal scroll and LocomotiveScroll is intercepting it and being like "no way, buddy, I'm slowing this down and starting over...". 

 

This is why we don't support 3rd party libraries and also why we intentionally designed ScrollTrigger not to do scroll-jacking. :)

 

That being said, you could probably do some fancy footwork and and do the snapping manually by adding a "scrollEnd" event listener and calling LocomotiveScroll's .scrollTo() method: 

 

 

 

ScrollTrigger.addEventListener("scrollEnd", () => {
	let st = TL.scrollTrigger,
		p = st.start + gsap.utils.snap(1 / (items.length - 1), st.progress) * (st.end - st.start);
	locoScroll.scrollTo(p);
});

I hope that helps. 

 

PS Is there any reason you're not just using the helper function in the docs that does smooth scrolling with only ScrollTrigger (no 3rd party libraries necessary)? 

I also find out this problem. I want to use scrollTrigger  snap with locomotive scroll but it's not working.. plz, help me to solve this issue..

 

 

Link to comment
Share on other sites

Hi @chandrashekhar welcome to the forum 

 

Please start your own topic with a minimal demo demonstrating the issue. 

 

Keep in mind that we want to scope this forum to GSAP related questions and seen that locomotive scroll isn't a GSAP product, you're better of asking support from them. Or alternatively you could use the SmoothScroll plugin which is a GSAP product and will work with ScrollTrigger out of the box! 

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