Ritik Posted October 31, 2023 Share Posted October 31, 2023 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. Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted October 31, 2023 Solution Share Posted October 31, 2023 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! 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