ashura Posted June 19, 2023 Share Posted June 19, 2023 https://codesandbox.io/s/reverent-darkness-k9dwrs?file=/src/Anim3.jsx:3093-3848 I am trying to prevent the scroll from scrolling down when the scrollTrigger hits to the element, but if the velocity or the speed of wheel is high I can't do anything about it. Is there a way to prevent it? I'm tryna do a observer with scrollTrigger at the same time though... But this is the main issue though. intentObserver = ScrollTrigger.observe({ type: "wheel,touch,pointer", // target: ".wrapper", onDown: () => !animating && gotoSection(currentIndex + 1, 1), onUp: () => !animating && gotoSection(currentIndex - 1, -1), tolerance: 10, preventDefault: true, onPress: (self) => { // on touch devices like iOS, if we want to prevent scrolling, we must call preventDefault() on the touchstart (Observer doesn't do that because that would also prevent side-scrolling which is undesirable in most cases) ScrollTrigger.isTouch && self.event.preventDefault(); } }); intentObserver.disable(); ScrollTrigger.create({ trigger: wrapperRef.current, pin: true, scrub: true, start: "top top", end: "+=10", markers: true, onEnter: () => { intentObserver.enable(); gotoSection(currentIndex + 1, 1); }, onEnterBack: () => { intentObserver.enable(); gotoSection(currentIndex - 1, -1); } }); Although in my code I add a extra-height just for the user to slow-down the scrolling but unfortunately it can't because the user wheelspeed relies on it. So the animation works though but you can't see it in its section because it already overlap the scrollTrigger in wrapper. <div className="anim3-component"> <div className="extra-height"></div> <div className="wrapper" ref={wrapperRef}> <svg width="0" height="0" fill="none" xmlns="http://www.w3.org/2000/svg" > <defs> <clipPath id="clip-path-1" clipPathUnits="objectBoundingBox"> <path ref={pathRef} d="M0.01 0L0.99 0.01V0.99L0.01 1V0Z" fill="#D9D9D9" /> </clipPath> </defs> </svg> <img src="https://i.pinimg.com/736x/34/5c/21/345c211390265f6c52e573c40ca45b08.jpg" alt="" /> </div> <div className="next-section"></div> </div> Is there a way I can fix it? Anyway this is the link of codesandbox https://codesandbox.io/s/reverent-darkness-k9dwrs?file=/src/Anim3.jsx:3093-3848 Link to comment Share on other sites More sharing options...
ashura Posted June 19, 2023 Author Share Posted June 19, 2023 Nevermind my mistake it should be has end: "+=100%" in the scrollTrigger lol...I'm so dumb. I was just following the tutorial of the gsap and its bad to use end +=1; hahaha Link to comment Share on other sites More sharing options...
GreenSock Posted June 19, 2023 Share Posted June 19, 2023 Nah, you're not dumb! We've all done something like that before. Thanks for sharing your solution. So are you all set now or did you still need help with something? Link to comment Share on other sites More sharing options...
ashura Posted June 19, 2023 Author Share Posted June 19, 2023 Yes I am sir @GreenSock. Just got having a hard-time how to deal with complex animation in scrollobserver and scrolltrigger Link to comment Share on other sites More sharing options...
GreenSock Posted June 19, 2023 Share Posted June 19, 2023 1 minute ago, ashura said: Just got having a hard-time how to deal with complex animation in scrollobserver and scrolltrigger Keep practicing and you'll be an expert in no time. The tools should allow you to do just about anything - your imagination is the limit. Have fun! 1 Link to comment Share on other sites More sharing options...
ashura Posted June 19, 2023 Author Share Posted June 19, 2023 Oh no actually I'm still not set @GreenSock what if the user's really scroll fast? I tried it very very fast and it kinda jump to another section. Try it sir @GreenSock Link to comment Share on other sites More sharing options...
GreenSock Posted June 19, 2023 Share Posted June 19, 2023 That's a lot of custom logic and code to dig through (I don't have time right now), but perhaps this thread will help: I don't think your technique for stopping the scroll is adequate. That thread shows a better way. But I wonder if it'd be much better/cleaner to just leverage normal pinning for this instead of trying to do all this custom logic that tries to force the user to not be able to scroll. As a user, that would drive me nuts - I see the scrollbar and I want to scroll...but it won't move! But if you just do regular pinning, everything works intuitively. Users can scroll forward/backward and it all makes sense. I just find the whole "completely prevent the user from being able to scroll but keep the scrollbar there" behavior to be very bad UX, but that's just my opinion. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted June 19, 2023 Solution Share Posted June 19, 2023 Hi, This example also might help: See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen Happy Tweening! 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