SumitJadhav Posted September 26, 2020 Share Posted September 26, 2020 Hi, I am using Tweenmax and ScrollToPlugin for smooth scroll effect on my website. I have used following code for same. $(function() { var $window = $('#outerWrapper'); //Window object var scrollTime = 2.5; //Scroll time var scrollDistance = 400; //Distance. Use smaller value for shorter scroll and greater value for longer scroll $window.on("mousewheel wheel DOMMouseScroll touchmove tick", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 2; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta * scrollDistance); TweenMax.to($window, scrollTime, { scrollTo: { y: finalScroll, autoKill: true }, ease: Power1.easeIn, //For more easing functions see https://api.greensock.com/js/com/greensock/easing/package-detail.html autoKill: true, overwrite: 5 }); }); }); and it really works great on mouse wheel scroll. I want same effect of smooth scroll when someone try to scroll website using trackpad on laptop. Is any solution for same? I tried with all events "$window.on("mousewheel wheel DOMMouseScroll touchmove tick", function(event) { " but this gives regular scroll while using trackpad, not smooth scroll effect. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 27, 2020 Share Posted September 27, 2020 Hey SumitJadhav. In general it's good to use a smooth scrolling library for this sort of thing. GSAP's official scroll plugin, ScrollTrigger, works great with them! Check out the .scrollerProxy() docs for info and demos. Also we highly recommend the GSAP 3 syntax. You can learn how to migrate here: 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