aleksandrevic

Dear @akapowl, thank you so much for laying out the solution in such detail. I'm fairly new to all this, however, your explanation makes it easy. Yes it took me like 30 minutes to figure out that I'd have to specify the scroller. Everything works the way you described. Thank you, Aleks

Dear community, I've implemented smooth and horizontal scrolling with locomotive scroll and I now want to use ScrollTrigger to control animations based on the horizontal scroll progress. Therefore, I've implemented the scrollerProxy function, which only works if I set my page to vertical scrolling via Locomotive Scroll. In general I face two issues: I cannot use ScrollTrigger with horizontal scrolling of Locomotive Scroll I cannot use Locomotive Scroll's data-scroll-sections to split the page (e.g. for better performance). Please find my implementation of scrollProxy: const scrollContainer = document.querySelector('#scrollable'); const locoScroll = new LocomotiveScroll({ el: scrollContainer, smooth: true, direction: 'horizontal', gestureDirection: 'vertical', getSpeed: true, getDirection: true, useKeyboard: true, multiplier: 0.8, firefoxMultiplier: 1.6 }); gsap.registerPlugin(ScrollTrigger); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, scrollLeft(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: scrollContainer.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); Based on this, I tried something like the following: let trigger = gsap.timeline({ scrollTrigger: { trigger: "#section", start: "left right", end: "left center", markers:true } }); trigger.from(".element", { x: "200px" }) The markers do show up, however they are placed for in a way that it looks like scrollTrigger is expecting vertical scrolling. The animation doesn't work at all - nothing happens. Could somebody please help me out? What could I provide you with in order to help me? Thanks, Aleks