ScrollTo with ScrollTrigger: uncontrollable scroll

[demiava]

I unfortunately can't provide a reproducable URL, as this is happening only on my local environment and I guess I have something specific causing this issue, but maybe it will be possible for anyone to point out some guesses. You can see on the video what is happening when I start scroll. And this is my code:

 

setup() {
	const goToSection = (section) => {
		gsap.to(window, {
			scrollTo: { y: section, autoKill: false },
			duration: 1,
		});
	};

	onMounted(() => {
		gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

		document.querySelectorAll('#snap-section').forEach((section) => {
			ScrollTrigger.create({
				trigger: section,
				onEnter: () => {
					console.log('onEnter', section);
					goToSection(section);
				},
			});
			ScrollTrigger.create({
				trigger: section,
				start: 'bottom bottom',
				onEnterBack: () => {
					console.log('onEnterBack', section);
					goToSection(section);
				},
			});
		});
	});

	return {};
},

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[demiava]

Unfortunately, on codepen the issue does not happen  I will try StackBlitz as I'm using Vue and share the progress later, thanks.

[demiava]

So, fortunately managed to get reproducible demo. Although, in order to witness the issue, as soon as the page is loaded, start scrolling. Or, wait for 2-3 seconds and everything will start working fine. So, I'm guessing it's something to do with maybe page dimensions not being loaded?

[GreenSock]

It looks like you're creating a ton of conflicting tweens that are fighting with each other. Set overwrite: true on your tween to have it immediately kill all other tweens of the same target. And I'm not sure why you're using two different ScrollTriggers for  each element - why not just use one? 

https://stackblitz.com/edit/vue-fchh5m?file=src%2FApp.vue

[demiava]

Yup, that turned out to be one of the reasons. Plus, what I didn't realise earlier was that in a another component I was setting gsap.defaults({ repeat: -1 })

[demiava]

@GreenSock I would like to re-open this topic once more. On the same example, try to scroll using laptop trackpad, as using mouse it seems to be working fine. And try to do long, short scrolls. The scrollbar then goes to the end of next section, but automatically scrolls back to to top section. overwrite or autoKill seems not helping 

[GreenSock]

Yeah, that's because of momentum scrolling that cause some devices (like Apple ones) to keep dispatching wheel events for a while. So imagine you flick the touchpad pretty hard and it goes to the next section but by the time it's finished animating, the touchpad is STILL dispatching a bunch of scroll events that are trying to continue the original motion - those scroll positions may be lagging behind, thus the browser is telling the window to scroll backwards which triggers that ScrollTrigger. 

 

So this isn't really ScrollTrigger/GSAP-related, it's more about standard browser event dispatching and handling those properly in your logic. 

 

Here's one solution: 

https://stackblitz.com/edit/vue-gce5ob?file=src%2FApp.vue

 

Here's an object you can just call wheel.stop() and wheel.start() to handle that stuff.

const wheel = {
  stop() {
    let scroller = document.scrollingElement,
        overflow = scroller.style.overflowY;
    scroller.style.overflowY = 'hidden'; // this is the only way to STOP in-progress momentum scroll
    setTimeout(() => overflow ? (scroller.style.overflowY = overflow) : scroller.style.removeProperty('overflow-y'), 1);
    window.addEventListener('wheel', wheel._prevent, {passive: false});
  },
  start() {
    window.removeEventListener('wheel', wheel._prevent);
  },
  _prevent: (e) => e.preventDefault(),
};

So you'd just stop it during the animation, and then restart it in an onComplete. 

Does that clear things up? 

[demiava]

Now it definitely is more clear what's the issue, and even though looks like it works on stackblitz, it still does not work on my local setup  Only now I discovered that many are facing same issue on trackpads, like this one.

 

[GreenSock]

10 hours ago, demiava said:

even though looks like it works on stackblitz, it still does not work on my local setup

Hm, there must be something different between the two. Can you reproduce the issue at all in Stackblitz/CodeSandbox/CodePen? Make sure you're running the latest version of everything too. 

[demiava]

I can't unfortunately upload videos due to file size limit, but I've striped-down my local components to exactly the same styles as in stackblitz, and scroll is still acting out. Maybe the fact the stackblitz is rendering the view inside iframe has to do something with it, I don't know. But clearly people are having same trouble.

 

I'm now trying Observer plugin, to hijack the events and manually move to different sections using ScrollToPlugin