How do I simply stop the user scrolldown velocity to the certain element in ScrollTrigger observer?

[ashura]

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
 

[ashura]

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

[GreenSock]

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? 

[ashura]

Yes I am sir @GreenSock. Just got having a hard-time how to deal with complex animation in scrollobserver and scrolltrigger

[GreenSock]

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!

[ashura]

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

[GreenSock]

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. 

[Rodrigo]

Hi,

 

This example also might help:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!