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
}