Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

locomotive scroll direction with ScrollTrigger

Recommended Posts

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?


<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

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

  • 2 weeks later...

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);

  • Thanks 1
Link to comment
Share on other sites

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).

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
  • 8 months later...

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());


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())
  }, [scroll])

  return null


I don't see any problem, but I doubt it works as intended.

Any pointers or ideas?


Link to comment
Share on other sites

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?




  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.