[Smooth Scroll with Trackpad]

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.

[gsap.min.js:10 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.]

13 minutes ago, ZachSaucier said:

Hey Sumit and welcome to the GreenSock forums.

 

It's not exactly clear what the issue is given you didn't provide a complete demo. My guess is that you're trying to use an old version of the ScrollToPlugin with the new GSAP 3 core. That won't work. If you're going to use the GSAP 3 core then you also need to use the GSAP 3 version of the plugins. Try this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>

If that doesn't fix the issue, please create a complete and minimal demo on CodePen as this thread covers:

 

Hi ZachSaucier,

thank you so much for quick response. It works now by updating version.
Thanks a Ton... !!!!

[gsap.min.js:10 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.]

I am using 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/ScrollToPlugin.min.js"></script>
for smooth scrolling which was working fine initially. But when I use <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>    for svg animation it gives me error as "gsap.min.js:10 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.".

Any solution for same?