Slider with onWheel event (REACT)

[PatMa]

Hey, I'm back and still lost about onWheel events with React and GSAP (I'm sorry.....).

I read a post (here) weeks ago, and I still don't understand. I hope someone can help me...

Here's a simple example of what I'm expected to create: a simple slider that can change with the onWheel event with React JS.

https://codesandbox.io/s/elegant-voice-8kqcb?file=/src/App.js

 

Perhaps I'm doing wrong, I don't know... When I'm scrolling, the third element appears directly and I don't know why.

Thanks a lot in advance

[OSUblake]

Check how many times a wheel event fires. It's not like a click event.

 

Also, it's better to use y or yPercent instead of top. 

[ZachSaucier]

Hey Pat. GSAP's new ScrollTrigger plugin can make this sort of thing super straightforward and open up a lot of fun possibilities. We highly recommend it!

 

We even have a demo that does exactly what you're trying to do:

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen.

[PatMa]

13 minutes ago, OSUblake said:

Check how many times a wheel event fires. It's not like a click event.

 

Also, it's better to use y or yPercent instead of top. 

 

I agree!!!,  and I tried so hard but i still don't understand how to display one console.log when I use the onWheel event. Do you have a fix?

 

Thanks for your answers

[ZachSaucier]

4 minutes ago, PatMa said:

i still don't understand how to display one console.log when I use the onWheel event. Do you have a fix?

Your approach isn't the best. We highly recommend that you use ScrollTrigger as it will be much easier for you to setup and maintain.

[PatMa]

Hi Zach,

 

I would! But can I use it to create a sort of slider ? Thanks

I mean like

See the Pen YRzRyM by PointC (@PointC) on CodePen.

[Rodrigo]

One option could be to create a boolean that prevents any other wheel event from triggering the handler code until the animation is completed.

const [state, setState] = useState({
  isActive1: true,
  isActive2: false,
  isActive3: false,
  isAnimating: false,
});

const animate = e => {
  if (!state.isAnimating) {
    setState({isAnimating: true});
    // Then the rest of your code
  }
}

 

Also I agree with @ZachSaucier, scroll trigger with the snap values is kind of tailor made for what you're trying to do, check out the sample Zach just posted.

 

Happy Tweening!!!

[ZachSaucier]

21 minutes ago, PatMa said:

can I use it to create a sort of slider ?

Sure.