Open Krishit23 opened 9 months ago
I am using Locomotive and ScrollTrigger.
gsap.registerPlugin(ScrollTrigger);
function loco() { const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scroll-wrapper"), smooth: true, multiplier: 1, scrollFromAnywhere: true, smartphone: { smooth: true }, tablet: { smooth: true }, });
locoScroll.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy(".scroll-wrapper", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; },
pinType: document.querySelector(".scroll-wrapper").style.transform ? "transform" : "fixed"
});
ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.defaults({ scroller: ".scroll-wrapper" });
ScrollTrigger.refresh(); } loco();
I am using Locomotive and ScrollTrigger.
gsap.registerPlugin(ScrollTrigger);
function loco() { const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scroll-wrapper"), smooth: true, multiplier: 1, scrollFromAnywhere: true, smartphone: { smooth: true }, tablet: { smooth: true }, });
locoScroll.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy(".scroll-wrapper", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; },
});
ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.defaults({ scroller: ".scroll-wrapper" });
ScrollTrigger.refresh(); } loco();