Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GSAP slider over scroll

Recommended Posts

Hi Guys,

I hope you can help me to fix the over scrolling on this slider. I forked this slider animation from @Ihatetomatoes tutorial. And added a mouse-wheel function that makes it scroll up and down using the existing function that Peter use but what I want to achieve is not to over scroll(not the infinite scroll) it to other section. And even if I hot scroll the wheel it will just snap onto the next slide.

Best Regards,
Mikhail Villamor

See the Pen gzYPeE by miksv (@miksv) on CodePen

Link to comment
Share on other sites

Hi miks,


you probably need a debounced function for this – a function that only activates once if it keeps getting called without a minimum time passed between two calls. https://css-tricks.com/debouncing-throttling-explained-examples/


You can either make one yourself, or use one that comes with lodash or underscore.js, or use this one that uses GSAP behind the scenes (and which I made): 

See the Pen OQxjOx by Acccent (@Acccent) on CodePen



If you do use that one, you can do so like this:

$window.on("mousewheel DOMMouseScroll", stipple(<your call>, {delay: x, leading: true}));

(delay is the time that needs to pass without any scroll events before a next call can happen.)

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Hi @acccent

Thank you so much for this. It worked perfectly.

One last question about the delay. The only thing that works for me is 0.2. What would you recommend or what is the min and max for this?


Link to comment
Share on other sites

That's weird, any value should work! It defaults to a minimum of 0.001 but that's the only constraint (it can't be 0).

Can you update your codepen to see how you're implementing it?

Link to comment
Share on other sites

Hi @Acccent,

I encountered a new problem, now is I couldn't use the swipe on my trackpad to move to sections. Thanks!

  • Like 1
Link to comment
Share on other sites

Oh okay. well let us know if you encounter any other difficulties related to gsap :)

  • Like 1
Link to comment
Share on other sites

Oh, what I mean is after using your code the swipe won’t work anymore. But the scroll does. ?

Link to comment
Share on other sites

Hm, I don't know why that would happen, it works fine on my computer. It might come from the fact that you're using deprecated events – you should use 'wheel':

$window.on("wheel", stipple(onMouseWheel, {delay: 0.2, leading: true}));

function onMouseWheel(event) {
  if(event.originalEvent.deltaY < 0) {
    // go up (or down, I can't recall)
  } else {
    // go the other way


More info here: https://developer.mozilla.org/en-US/docs/Web/Events/wheel (that page also provides a convenient polyfill for older browsers)

  • Like 4
Link to comment
Share on other sites

Sorry for the late reply.  Thank you this work better than previous function that I was using.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.