PatMa Posted June 5, 2020 Share Posted June 5, 2020 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 More sharing options...
OSUblake Posted June 5, 2020 Share Posted June 5, 2020 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. 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 5, 2020 Share Posted June 5, 2020 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 More sharing options...
PatMa Posted June 5, 2020 Author Share Posted June 5, 2020 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 More sharing options...
ZachSaucier Posted June 5, 2020 Share Posted June 5, 2020 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 More sharing options...
PatMa Posted June 5, 2020 Author Share Posted June 5, 2020 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 More sharing options...
Rodrigo Posted June 5, 2020 Share Posted June 5, 2020 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!!! 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 5, 2020 Share Posted June 5, 2020 21 minutes ago, PatMa said: can I use it to create a sort of slider ? Sure. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now