WolfLTC Posted June 16, 2022 Share Posted June 16, 2022 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 More sharing options...
SteveS Posted June 16, 2022 Share Posted June 16, 2022 let smoother = ScrollSmoother.create({ smooth: 0.5, //<- increase or decrease this value to adjust how long it takes for the smoothing to catch up }); 1 Link to comment Share on other sites More sharing options...
PointC Posted June 16, 2022 Share Posted June 16, 2022 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. 1 Link to comment Share on other sites More sharing options...
WolfLTC Posted June 17, 2022 Author Share Posted June 17, 2022 @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 More sharing options...
PointC Posted June 17, 2022 Share Posted June 17, 2022 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 More sharing options...
Solution GreenSock Posted June 17, 2022 Solution Share Posted June 17, 2022 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) 1 Link to comment Share on other sites More sharing options...
PointC Posted June 17, 2022 Share Posted June 17, 2022 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 More sharing options...
GreenSock Posted June 17, 2022 Share Posted June 17, 2022 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 More sharing options...
WolfLTC Posted June 21, 2022 Author Share Posted June 21, 2022 @GreenSock Thankyou its worked. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now