Hi, I love this ScrollTrigger Locomotive implementation.
I used it in my React project, there were a few gotchas, but it works nicely now.
The only thing that is lacking right now is the way these two lines are called:
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();
I define everything in a useEffect, then put those in the return:
const ScrollTriggerProxy = () => {
const { scroll } = useLocomotiveScroll()
useEffect(() => {
if (scroll) {
const element = scroll?.el
scroll.on('scroll', ScrollTrigger.update)
ScrollTrigger.scrollerProxy(element, {
scrollTop(value) {
return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight,
}
},
pinType: element.style.transform ? 'transform' : 'fixed',
})
}
return () => {
ScrollTrigger.addEventListener('refresh', () => scroll?.update())
ScrollTrigger.refresh()
}
}, [scroll])
return null
}
I don't see any problem, but I doubt it works as intended.
Any pointers or ideas?
Thanks