I'm currently building a website with nuxt 3 gsap scrolltrigger and locomotive scroll.
I created a composable to load locomotive and set up a proxy for Scrolltrigger, here is the code for this
import LocomotiveScroll from "locomotive-scroll";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger)
export const useLocoScroll = () => {
const locoScroll = ref<LocomotiveScroll>();
onMounted(async () => {
const { default: LocomotiveScroll } = await import('locomotive-scroll');
const scrollEl = document.querySelector('#js-scroll') as HTMLDivElement
console.log(scrollEl, 'scrollEl');
locoScroll.value = new LocomotiveScroll({
el: scrollEl,
smooth: true,
smartphone: {
smooth: true
},
multiplier: 0.55,
class: "revealed",
lerp: 0.07
})
locoScroll.value.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy("#js-scroll", {
scrollTop(value) {
// @ts-ignore
if (locoScroll.value) {
// @ts-ignore
//console.log(locoScroll.value.scrollTo(value, 0, 0), 'aa', locoScroll.value.scroll.instance.scroll.y);
return arguments.length
// @ts-ignore
? locoScroll.value.scrollTo(value, 0)
// @ts-ignore
: locoScroll.value.scroll.instance.scroll.y;
}
return null;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
},
});
ScrollTrigger.addEventListener("refresh", lsUpdate)
ScrollTrigger.refresh()
ScrollTrigger.defaults({
scroller: scrollEl,
});
})
const lsUpdate = () => {
console.log(locoScroll.value, 'lsUpdate');
if (locoScroll.value) {
locoScroll.value.update();
}
};
const timer = setTimeout(function () {
locoScroll.value?.update();
console.log("updating");
}, 100);
onUnmounted(() => {
if (locoScroll.value) {
ScrollTrigger.removeEventListener("refresh", lsUpdate);
locoScroll.value.destroy();
locoScroll.value = undefined
clearTimeout(timer)
}
});
return { locoScroll }
}
With this I managed to get locomotive scroll working but I think the proxy don't work correcly. this is the markers at the top of the page. scrolltrigger markers
And when i scroll the markers don't move :/ scrolltrigger markers don't work
If you have any sugestion to fix this issues, it would be great. If you need more details you can ask, I will give them. Thank you !
I tried a lot of things, but there isn't a lot of exemples with nuxt 3, so I'm facing a wall now. And I'm expecting the markers to follow the different box when I'm scrolling.