Jump to content


  • Posts

  • Joined

  • Last visited

About coffee_breath

coffee_breath's Achievements

  1. 👏👏👏 Works perfectly! I would suggest elevating Demo (native ScrollTrigger) to the top of the scrollerProxy examples - it's the cleanest solution imo - using other lib's with ScrollTrigger for smooth scrolling muddies the water. Or even consider rolling this into a companion plugin for ScrollTrigger... ScrollJack 😃. JK Thanks again! gsap is the best.
  2. Hey Jack, Thanks for the incredible library btw, i've been an advocate for some time. It appears setting the window position in setProp kills the snapping transition tweenTo in ScrollTrigger. This makes sense, given a user scroll should kill the snapping transition right? The only problem with this approach is that it creates a loop. Scroll within dist of snap transition to point call setProp - set window position scrollTrigger detects a scroll kill snap transition Scroll within dist of snap (back to start). A possible work around inside ScrollTrigger might be to check the current scroll position against the expected scroll position, if they don't match then it suggests a user has taken control of the scrolling, in which case kill the snap transition. pseudo code; // Somewhere in ScrollTrigger, where the scroll handler is killing the snap tweenTo transition window.addEventListener('scroll', val => { let y = getScrolltop() killSnap(y) }) killSnap(y) { if (Math.floor(snapTweenObj.y) !== y && snapping) { gsap.killTweensOf([ snapTo, snapTweenObj]) snapping = false } } getScrolltop(){ return ( document.body.scrollTop || document.documentElement.scrollTop ) } // snapTo func called when within dist of closest snapPoint snapTo() { snapTweenObj.y = getScrollTop() gsap.killTweensOf(snapTweenObj) gsap.to(snapTweenObj, { duration: 0.5, ease: 'sine.inOut', onUpdate: onSnapUpdate, onComplete: onSnapComplete, y: snapPoint, }) } onSnapUpdate() { gsap.set(window, { scrollTo: snapTweenObj.y }) } onSnapComplete() { snapping = false }
  3. https://codepen.io/the-cam/pen/MWJdEMR Hey there, I'm trying to get the Smooth Scroll with ScrollTrigger Natively demo to work with snapping. In the codepen supplied snapping works - it transitions to the closest value from point a to point b as expected. However once you start scrolling again ( after the snap has completed ), the native scroll bar reverts back to point a, where it was before the snap transition. It appears that the native scroll position isn't updated duration the snap transition. I tried updating the setProp function to set window.scrollTop rather than the original "content" elements position, in a hope that the native scroll position would update ScrollTrigger and in turn update the the "content" elements position. But his didn't not work. Thanks in advance