Interrupting ScrollTo

[mimeartist]

Have searched around and have seen various topics about interrupting scrollTo, but they seem to offer bespoke versions of the gasp scrollTo plugin and are a few years old... What is the latest way to interrupt a scrollTo... e.g I've clicked a link to scroll to a point on the page, but then decided to scroll, is there a setting for this now, or should I just listen for a scrollwheel and then kill the tween?

 

Want to keep it as simple as possible if I'm able.

[Rodrigo]

Hi,

 

I believe the API hasn't changed over the years, just use the autoKill config:

 

Quote

To have ScrollToPlugin automatically sense if the scroll position was changed outside of itself (like if the user manually started dragging the scrollbar mid-tween) and cancel that portion of the tween, set autoKill: trueinside the scrollTo object.

gsap.to(myDiv, {
  duration: 2,
  scrollTo: { y: 400, autoKill: true },
  ease: "power2",
});

 

Hopefully this helps.

Happy Tweening!

[mimeartist]

Thanks Rodrigo,

 

I mistakenly had the autoKill outside of the scrollTo, like this...

 

//DON'T DO THIS//

gsap.to(window, {
            duration: 1,
            scrollTo: '#anchor' + jumpChapter,
            autoKill: true
        });

//DON'T TO THIS//

[mimeartist]

One question on this, if I'm calling this when the user uses a finger press for iPad etc. what the best method of avoiding the autoKill thinking that the touch is actually a request to kill? Should I only be using touched for example?

 

I spotted someone else with this issue a while back but it came to a headend.

 

Thank you.

 

 

[Rodrigo]

Hi,

 

Honestly IDK what can be done since normally when you swipe on a touch device the momentum scroll will trigger. During that any touch input will immediately stop the momentum scroll. This is how browsers work mostly.

 

On that note what type of touch event should not be considered an autoKill event? How can that be achieved? Right of the top of my head I can't think of a way to achieve this.

 

Sorry I can't be of more assistance 🫤

Happy Tweening!