Jump to content
Search Community

GSAP slider over scroll

miks test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

Cheers!

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

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.
×
×
  • Create New...