snapStart triggers after slight scroll has happened

[Ritik]

Video with the issue
 

        .timeline({
          scrollTrigger: {
            trigger: containerRef.current.querySelector(".containerDiv"),
            start: "top top",
            end: () => {
              const containerDiv = document.querySelector(".containerDiv");
              return containerDiv ? `+=${containerDiv.offsetWidth}` : 0;
            },
            pin: true,
            scrub: true,
            snap: {
              inertia: false,
              snapTo: "labelsDirectional",
              duration: { min: 0.2, max: 1.6 },
              ease: "power3",
              delay: 0,
              onStart() {
                alert("snap started after a bit of scroll");
              },
            },
            // onSnapComplete() {
            //   alert("snap completed");
            // },
            onUpdate: (trigger) => {
              setProgressBar(trigger.progress);
            },
          },
        })

I want you to focus on the snap property of scrollTrigger, the video shows how onStart() is only triggered after a bit of scroll has happened. I am unable to understand why this delay is occurring.
I'd create a minimal demo if this issue is not due to some common occurrence or my lack of understanding.

[mvaneijgen]

The snap functions runs after the visitor has done scrolling. Check out the quote from Jack him self (on this post)

Quote

ScrollTrigger cannot snap until scrolling has completely stopped. It has to keep watching the scroll position until it has not changed for a little while, otherwise snapping would interfere with normal user scrolling. So even if you set delay: 0, it won't actually have zero delay. That's simply impossible. 

 

Hope it helps and happy tweening!