perfecti Posted December 27, 2021 Share Posted December 27, 2021 Hi, how can I fix my animation to make the scroll look like this slider? See the Pen JjrMPMW by Speculant (@Speculant) on CodePen Link to comment Share on other sites More sharing options...
perfecti Posted December 27, 2021 Author Share Posted December 27, 2021 I tried to solve like this, delete scrolltrigger, and add wheel event let section = 0; const maxSection = 3 $container.addEventListener('wheel', (e) => { const direction = e.deltaY > 0 ? 1 : -1; e.preventDefault() if (scrollTween) return section += direction; console.log(section) if(section < 0) { section -= direction; return } if(section >= maxSection) { section -= direction; return } scrollTween = true; goToSection(section) }, { passive:false }) its work, but how enable scroll after last section? Link to comment Share on other sites More sharing options...
GreenSock Posted December 27, 2021 Share Posted December 27, 2021 21 hours ago, perfecti said: I tried to solve like this, delete scrolltrigger, and add wheel event let section = 0; const maxSection = 3 $container.addEventListener('wheel', (e) => { const direction = e.deltaY > 0 ? 1 : -1; e.preventDefault() if (scrollTween) return section += direction; console.log(section) if(section < 0) { section -= direction; return } if(section >= maxSection) { section -= direction; return } scrollTween = true; goToSection(section) }, { passive:false }) its work, but how enable scroll after last section? If you need some help, please provide a minimal demo and a GSAP-specific question and we'd be happy to take a look. That site does indeed look like it's not actually scrolling - it merely listens for wheel events and creates animations accordingly. If you want to actually scroll after the last section, you'll probably have to rework the logic because the page will either allow scrolling or not. So you'd probably need to build it with actual scrolling but override that in your "sections" and then when the user reaches the end, implement your logic so that it no longer overrides anything after a certain scroll position. Again, a minimal demo will go a long way to getting help. This certainly isn't a simple scenario - you'll need to .preventDefault() on wheel/scroll/touch/pointer events in various scenarios too. We really try to keep these forums focused on GSAP-specific questions, though, so you may not get a lot of "how do I build this whole thing" answers here since a lot of this is related to logic issues and handling native events, etc. 1 Link to comment Share on other sites More sharing options...
perfecti Posted December 28, 2021 Author Share Posted December 28, 2021 2 hours ago, GreenSock said: If you need some help, please provide a minimal demo and a GSAP-specific question and we'd be happy to take a look. That site does indeed look like it's not actually scrolling - it merely listens for wheel events and creates animations accordingly. If you want to actually scroll after the last section, you'll probably have to rework the logic because the page will either allow scrolling or not. So you'd probably need to build it with actual scrolling but override that in your "sections" and then when the user reaches the end, implement your logic so that it no longer overrides anything after a certain scroll position. Again, a minimal demo will go a long way to getting help. This certainly isn't a simple scenario - you'll need to .preventDefault() on wheel/scroll/touch/pointer events in various scenarios too. We really try to keep these forums focused on GSAP-specific questions, though, so you may not get a lot of "how do I build this whole thing" answers here since a lot of this is related to logic issues and handling native events, etc. I thought maybe the scrolltrigger can do this behavior, but didn’t know how, so I turned here. I updated the code in the first post, it seems to work well now 1 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