Hi, thx for the answer.
This is what I have to sync scrollTrigger with locomotive:
src/components/scroll.jsx
locoScroll.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy(scrollWrapper.current, {
scrollTop(value) {
console.log(locoScroll.scroll.instance.scroll.y);
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: scrollWrapper.current.style.transform
? "transform"
: "fixed"
});
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();
The docs shows a similar example but it seems that the scrollTop() is not working. This "console.log(locoScroll.scroll.instance.scroll.y);" is working on the example but not there, thats what it makes me think that is something that i made in the wrong way with the scrollProxy. The animation is here:
const animationTl = gsap.timeline();
ScrollTrigger.create({
trigger: ".gsap-container",
animation: animationTl,
markers: true,
start: "top center+=300px",
end: "top center-=300px",
scrub: true
});
animationTl.to(".square", {
rotateZ: 90,
x: "100%"
});
And it works perfect without locomotive.
What I expect its that scrollTrigger takes the scroll position of locomotive instead of the main scroll as its 0 always with the overfllow: hidden of the body.
Thx for the help, I'll keep searching ?
