Jump to content
GreenSock

PatMa

Slider with onWheel event (REACT)

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!!!

  • Like 2
Link to comment
Share on other sites

21 minutes ago, PatMa said:

can I use it to create a sort of slider ?

Sure.

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.
×