Share Posted July 17, 2020 Hi, when looking at this codepen Locomotive Scroll with ScrollTrigger scrubbing and pinning/ There is no scroll 'data-direction="" ' up or down, if you set getDirection: true, like the code example below, it does not work! const locoScroll = new LocomotiveScroll({ el: document.querySelector(".smooth-scroll"), smooth: true, getDirection: true }); The example from https://locomotivemtl.github.io/locomotive-scroll/ has the data-direction="" within the Dom. How do you get this code to work with your codepen example? Thanks <html class="is-smooth-scroll-compatible is-loaded is-ready has-scroll-init has-scroll-smooth has-scroll-scrolling" data-direction="up" lang="en"> See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Share Posted July 17, 2020 Hey Rob. This seems like a Locomotive Scroll question and isn't really related to GSAP from what I can tell (please correct me if I'm missing something). I suggest that you post in their GitHub issues and ask there. Link to comment Share on other sites More sharing options...
Share Posted July 17, 2020 I'm not sure what you're trying to do, but you could use ScrollTrigger's .direction property in some cases. Here I'm logging the direction when the red section's ScrollTrigger is active. See the Pen ExPdqKy?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted July 17, 2020 Thanks... Link to comment Share on other sites More sharing options...
Share Posted July 29, 2020 Had the same issue, but here's the solution setTimeout(function () { var scroll = new locomotiveScroll({ el: document.querySelector(".o-scroll"), smooth: true, getSpeed: true, getDirection: true }); scroll.on("scroll", function (t) { document.documentElement.setAttribute("data-direction", t.direction); }); }, 100); 1 Link to comment Share on other sites More sharing options...
Share Posted July 29, 2020 8 minutes ago, plankton said: Had the same issue, but here's the solution If that's the solution, it's probably better to use the relevant callback (like the window's load event) instead of a timeout. That way you're sure that it runs when it needs to instead of guessing a time in the future (like 100ms like you code does). 1 Link to comment Share on other sites More sharing options...
Share Posted August 20, 2020 Hi, when I add locomotivescroll to this slidescroll sections, it doesnt works well. See the Pen jOWaZZV by jimmyadaro (@jimmyadaro) on CodePen Uncaught TypeError: ScrollTrigger.scrollerProxy is not a function i got this error Can u pls help me. Thanks in advance horizontal-scroll with locoScroll.zip Link to comment Share on other sites More sharing options...
Share Posted August 20, 2020 Hey @Pradeep PI I just answered on your original post. 2 Link to comment Share on other sites More sharing options...
Share Posted April 23, 2021 Hi, I love this ScrollTrigger Locomotive implementation. I used it in my React project, there were a few gotchas, but it works nicely now. The only thing that is lacking right now is the way these two lines are called: ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); I define everything in a useEffect, then put those in the return: const ScrollTriggerProxy = () => { const { scroll } = useLocomotiveScroll() useEffect(() => { if (scroll) { const element = scroll?.el scroll.on('scroll', ScrollTrigger.update) ScrollTrigger.scrollerProxy(element, { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, } }, pinType: element.style.transform ? 'transform' : 'fixed', }) } return () => { ScrollTrigger.addEventListener('refresh', () => scroll?.update()) ScrollTrigger.refresh() } }, [scroll]) return null } I don't see any problem, but I doubt it works as intended. Any pointers or ideas? Thanks Link to comment Share on other sites More sharing options...
Share Posted April 24, 2021 Hey @monolith - welcome to the forums. I personally have no experience with React, so I can't be much of help here myself. But in the meantime until somebody comes along, who knows his way around React, have you seen this thread? It contains a working codesandbox-example by the OP, using locomotive-scroll with ScrollTrigger and React. Maybe that can help you get set up? https://codesandbox.io/s/beautiful-meadow-zlynm?fontsize=14&hidenavigation=1&theme=dark&file=/src/useLocoScroll.js 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now