Jump to content
Search Community

Slider with onWheel event (REACT)

PatMa test
Moderator Tag

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

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

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

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