0

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.

0 Answers0