Jump to content
GreenSock

WolfLTC

Adjust ScrollSmoother Speed Distance

Go to solution Solved by GreenSock,

Recommended Posts

Hi Greensock community,

I just want to know that is there any way to adjust the scroll smoother speed and distance like Lucid air https://www.lucidmotors.com/air
if you notice if we scroll mouse wheel the scroll distance is very short
can anyone help to acheive this.

Thanks
 

Link to comment
Share on other sites

let smoother = ScrollSmoother.create({
  smooth: 0.5,   //<- increase or decrease this value to adjust how long it takes for the smoothing to catch up
});

 

  • Like 1
Link to comment
Share on other sites

Hi @WolfLTC :)

 

Welcome to the forum and thanks for being a Club member. 🎉

 

Are you referring to how far the page scrolls on each mousewheel on that site? If so, I'm not 100% sure, but I'd think you'd need to intercept the wheel event and preventDefault. Then scroll the page as far as you'd like. 

 

Happy tweening and welcome aboard.

:)

 

  • Like 1
Link to comment
Share on other sites

@PointC Yes I'm referring to how fat the page scrolls on each mousewheel can you help me for that?

Link to comment
Share on other sites

I guess you could do something like this:

 

document.addEventListener("wheel", function (e) {
  e.preventDefault();
  gsap.to(window, { scrollTo: "+=" + e.deltaY / 2 });
});

Though I'm not sure how well that would work with ScrollSmoother as it has the fixed wrapper and scrolls the inner content.

Link to comment
Share on other sites

  • Solution

Yeah, if you're already using ScrollSmoother, there's no need to animate the native scroll position - you can just set it immediately and ScrollSmoother will gradually "catch up". 

let ratio = 0.5;
document.addEventListener("wheel", function (e) {
  e.preventDefault();
  window.scrollTo(0, window.pageYOffset + e.deltaY * ratio);
});

Or leverage Observer since it has debouncing built-in: 

let ratio = 0.5;
Observer.create({
  type: "wheel",
  preventDefault: true,
  onChangeY: self => window.scrollTo(0, window.pageYOffset + self.deltaY * ratio)
});

(both are untested - I'm just throwing some ideas out there for you to try if you'd like)

  • Like 1
Link to comment
Share on other sites

Of course: Observer 🤦‍♂️ I still don't have the muscle (or brain) memory to reach for that one.

 

Just my two cent opinion from a user perspective but that lucid site always feels odd to me. Like my mouse wheel is slipping or something. You get used to your wheel taking you a certain distance down the page and now you have to spin it twice as much. Again just my 2 cents though. 

 

Happy tweening.

Link to comment
Share on other sites

I totally agree - it's always dangerous territory to mess with the way scroll behaves. Adding some smoothing can be nice, but if you alter distances and other native behavior, it can start to make the user feel disoriented or like the site is broken. Just my opinion. 

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