coffee_breath
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by coffee_breath
-
-
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 }
-
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 setwindow.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
ScrollTrigger + Snapping + Native smooth scroll demo - issue with native scroll position after snapping
in GSAP
Posted
👏👏👏 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.