Jump to content
Search Community

locomotive scroll direction with ScrollTrigger

robmarshall test
Moderator Tag

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?

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

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

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

 

  • 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.
×
×
  • Create New...