GSAP ScrollTo at mousemove with autokill

[Moritz Profitlich]

Hello

 

I have a page that automatically scrolls when moving the mouse (using ScrollTo). This works fine. I now want to autoKill the mousemove event as soon as the user scrolls the page instead of just moving the mouse. autoKill is ignored however. The pen I wrote would output an alert if autoKill was triggered.

 

I could create a separate scroll event and remove the eventListener but I ask myself why autoKill does not trigger.

 

Thanks for your ideas!

See the Pen GRwObbz by mprofitl (@mprofitl) on CodePen

[mvaneijgen]

autoKill will not be invoked, because every mouse move is a new scrollTo instance. I've tried moving the mouse and scrolling at the same time (damn that is hard), but it seems that the scrollTo and the scroll will never overlap, I don't know what the pulling rate is of a mouse on the web and the duration of your tween is also 0, so they never match up.

 

I think in this case you not only want to kill the scrollTo, but also want to removeEventListener when the visitor scrolls, right? 

 

Here is a pen with just one scrollTo and it will invoke it everytime.

 

Maybe if the tween was outside of the eventListener and you would update the same tween each mouse move the logic would work, but I don't know how that would work in this setup. Hope it helps and happy tweening! 

 

See the Pen poQpzZx?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[akapowl]

 

I actually think what you are trying to do, how you are trying to do it, is a logical impossibility - I might be totally wrong of course.

Since your tween is set to a duration of 0, from a logical point of view, you would have to start scrolling within a timeframe in between 0ms and 0ms of that tween for the autoKill to kick in - which shouldn't be possible, since there wouldn't be a time window of any sorts where it could kick in, no? 🤔

 

You can see the autoKill working 'just fine', when you set the duration to something higher like 0.1, e.g.

 

But then also, when you are using the ScrollToPlugin to scroll somewhere on mousemove, you will change the scroll-position on the page 'manually', and this will make the autoKill trigger instantly and thus constantly with all the tweens you create onmousemove because you are interrupting the tween by changing the scroll-position again, if I am not mistaken.

 

[Not sure where you want to go with this, but it might be relevant to know - or maybe that already is the outcome you expected]

 

... I exchanged your alert() with a console.log() here, because the alert got triggered way too often then.

See the Pen YzRYKBN by akapowl (@akapowl) on CodePen

[Moritz Profitlich]

Thanks,  akapowl

Now it triggers, indeed. Thank your for the explanation of the timeframe – I get the idea.

 

It now triggers whenever I move the mouse. When I scroll it does not trigger. It should be vice versa as I want to stop the eventListener when the user scrolls. I wrote a new pen:

See the Pen KKrZKwE by mprofitl (@mprofitl) on CodePen

. Instead of a writing to the log it removes the eventListener.

 

Why does the mousemove event trigger autokill?

[mvaneijgen]

4 minutes ago, Moritz Profitlich said:

Why does the mousemove event trigger autokill?

 

Because it's creating a new scrollTo instance every mouse move, so your second mouse  move is killing your first mouse move 

[Moritz Profitlich]

2 minutes ago, mvaneijgen said:

 

Because it's creating a new scrollTo instance every mouse move, so your second mouse  move is killing your first mouse move 

Do you know: Is there a way to have a single scrollTo instance only and to update it when the mouse moves? — sorry, I did not see that you posted already before akapowl. You just had that idea…

[mvaneijgen]

Ha, I do not! 😅

 

I just tried killing the EventListener on scroll, but scrollTo is scrolling, so it will always be killed. I'm now thinking maybe the 

Observer plugin https://greensock.com/docs/v3/Plugins/Observer would allow you to catch the multiple types of interactions, but I'm not sure.

 

Probably @akapowl will post something smart when the time is right, just hold tight. If I find something new later to day I'll post beck here. 

 

See the Pen RwqxwMy?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[akapowl]

 

I was going to suggest something similar, just not use the 'scroll' event but instead pick the events you want things to happen on [and yes, like Mitchel suggested you could also use Observer for that] - because as already mentioned, using the scroll event would create a paradox of sorts.

 

If you ever want to re-apply the mousemove eventlistener you could e.g. use ScrollTrigger to listen for 'scrollEnd' at after some time add the eventListeners back, maybe; just an idea.

 

This is not 100% ideal, but I think most of what and how you it to happen will be logic related and not so much a GSAP thing.

See the Pen YzRYzNr by akapowl (@akapowl) on CodePen