Howdy 👋
I haven't dived very deep into this package, and it seems to work flawlessly for me so far.

But looking at the code, I think that implementing a debounce on the height observer would be a nice performance boost.

Most of the components impacting the height of the container will have some sort of transition, so duration and easing.
This mean's that the scroll.update() is triggered a bunch of times while the transition happens.

You can think of collapsible components for instance.
Thanks.

Hiya,

Thank you for making this library, we (Phantom) are using it on a project in production now for over a year. It's been great, but since the latest Firefox version, we're getting some unexpected behaviour. If you open up a project using Firefox v105 with the latest (V0.2.2) react-locomotive-scroll, you'll see that there's a Typescript error saying: transform is undefined.
In production this results in no scroll once you navigate on a next.js app, but if you run a development build, you see it straight away.

I'm not sure if it's just a Typescript issue, since it's only happening on Firefox. I don't think Locomotive-scroll or react-locomotive-scroll have changed much recently, so it must be a Firefox issue? 🤔 Happy to discuss!

I know you're looking for contributors, I'm happy to assist you on this as well. If you'd be able to brief me a little bit on the library and how it's built.

Thanks!
Emiel

I'd like to use scroll.on('scroll', doSomething).
I tried like below but it doesn't work.

const {scroll} = useLocomotiveScroll();
useEffect(() => {
  scroll.on('scroll', () => console.log('test'));
}, [scroll])

How can I use it?

Hey there,

I reached out to you on Twitter @toinelin, but an Issue definitely seems to be more fitting. I'm currently implementing the project in a Next.js website that uses server-side data to render conditional page sections.

For example, using WordPress with Advanced Custom Fields I map through the Flexible Content specified in my ACF data to render page sections as they are returned from gql.

I've done this with two projects, my personal site, and the one I'm currently working on.

My personal site is using the same structure, where _app.tsx utilizes LocomotiveScrollProvider to wrap all pages in the provider, e.g.

function MyApp({ Component, pageProps }: AppProps) {
  const containerRef = useRef(null);
  const { route } = useRouter();

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <LocomotiveScrollProvider
          options={{ smooth: true }}
          watch={[route]}
          containerRef={containerRef}>
          <BaseCSS />
          <main data-scroll-container className="container">
            <Component {...pageProps} />
          </main>
        </LocomotiveScrollProvider>
      </Provider>
    </ApolloProvider>
  );
}

The odd behavior that I'm seeing, however, is shown in the attached image.

You'll see that for some reason there are two scrollbars. Additionally, there seem to be two Scrolls in context. Utilizing const {scroll} = useLocomotiveScroll() provides me with the scroll context, and calling the .stop() method on it stops only one of the scrolls.

The real question here is why am I getting two scrolls? It's creating extremely strange behavior as you might expect.

react-locomotive-scroll: the context is missing. You may be using the hook without registering LocomotiveScrollProvider, or you may be using the hook in a component which is not wrapped by LocomotiveScrollProvider.

I get the message above in the console whilst using this in a Next JS project. It seems to work but I get a lot of these console warnings.

The fact it works and I have actually got them wrapped its not a major issue but has anybody got the same issue?

i have some issues i cannot seem to wrap my head arround.

I would really like to use locomotivescroll but I am getting all sorts of weird whitespace etc ..

I think the issue lies with lazyloading images and components..

I already update the scroll after the lazyload has happened but when I switch pages in my gatsby app with page transitions ( react-transition-group) AND also without transitions.. I get all sorts of lengths of whitespace at the bottom...

 <LazyLoadImage
                    effect="opacity"
                    src={page.about.picture.sourceUrl}
                    srcSet={page.about.picture.srcSet}
                    afterLoad={() => scroll.update()}
                />

The plugin is not letting me use react 17.0.2

This bug seems to be persistent. When I go to another page that I scroll down a bit and click the button to go back, the page keeps the position of the old page, even when using scrollTo(0, ...);

This bug is similar to the issue #9

Hey,

I tried setting the property data-scroll-section in the inner section instead of setting it in the page wrapper. But it throws an error.

I wanted to try splitting it by section as per the locomotive-scroll documentation which says it could potentially improve performance.

When I try to zoom in and zoom out the page using mouse wheel and Ctrl key, page zoom is working, but it also scrolls the page.

Is it possible to update this to support react 18?

By following the documentation provided by locomotive scroll
This code results with the following error:

<div className={`c-section -fixed`} data-scroll-section data-persistent>
       <div className="c-fixed_wrapper" data-scroll data-scroll-repeat>
              <div className="c-fixed_target" id="fixed-target"></div>
               <div className="c-fixed" data-scroll data-scroll-sticky data-scroll-target="#fixed-target">
                      {/* 
                      // @ts-ignore */}
                     <div onScroll={onScroll}>
                            Content goes here
                     </div>
              </div>
       </div>
</div>

Error:

Unhandled Runtime Error

Error: react-locomotive-scroll: TypeError: section is undefined
Call Stack
LocomotiveScrollProvider/</</<
node_modules\react-locomotive-scroll\module\LocomotiveScroll.context.js (34:0)
fulfilled
node_modules\tslib\tslib.es6.js (71:42)
promise callback*step
node_modules\tslib\tslib.es6.js (73:32)
__awaiter/<
node_modules\tslib\tslib.es6.js (74:0)
__awaiter
node_modules\tslib\tslib.es6.js (70:0)
LocomotiveScrollProvider/</<
node_modules\react-locomotive-scroll\module\LocomotiveScroll.context.js (23:0)
LocomotiveScrollProvider/<
node_modules\react-locomotive-scroll\module\LocomotiveScroll.context.js (36:9)
commitHookEffectListMount
node_modules\react-dom\cjs\react-dom.development.js (23150:0)
commitPassiveMountOnFiber
node_modules\react-dom\cjs\react-dom.development.js (24926:0)
commitPassiveMountEffects_complete
node_modules\react-dom\cjs\react-dom.development.js (24891:0)
commitPassiveMountEffects_begin
node_modules\react-dom\cjs\react-dom.development.js (24878:0)
commitPassiveMountEffects
node_modules\react-dom\cjs\react-dom.development.js (24866:0)
flushPassiveEffectsImpl
node_modules\react-dom\cjs\react-dom.development.js (27039:0)
flushPassiveEffects
node_modules\react-dom\cjs\react-dom.development.js (26984:0)
commitRootImpl/<
node_modules\react-dom\cjs\react-dom.development.js (26769:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)
EventHandlerNonNull*
node_modules\scheduler\cjs\scheduler.development.js (571:0)
<unknown>
node_modules\scheduler\cjs\scheduler.development.js (633:3)
./node_modules/scheduler/cjs/scheduler.development.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1190:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\scheduler\index.js (6:2)
./node_modules/scheduler/index.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1201:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\react-dom\cjs\react-dom.development.js (27:24)
<unknown>
node_modules\react-dom\cjs\react-dom.development.js (29867:3)
./node_modules/react-dom/cjs/react-dom.development.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1135:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\react-dom\index.js (37:2)
./node_modules/react-dom/index.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1157:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\next\dist\client\portal\index.js (8:24)
./node_modules/next/dist/client/portal/index.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (533:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\next\dist\client\index.js (21:22)
./node_modules/next/dist/client/index.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (478:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (373:21)
<unknown>
node_modules\next\dist\client\next-dev.js (3:16)
./node_modules/next/dist/client/next-dev.js
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (489:1)
options.factory
/_next/static/chunks/webpack.js (718:31)
__webpack_require__
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/webpack.js (37:33)
__webpack_exec__
/_next/static/chunks/main.js (1217:61)
<unknown>
file:/C:/Users/naim1/Desktop/portfolio-site/.next/static/chunks/main.js (1218:53)
<unknown>
webpackJsonpCallback@http://localhost:3000/_next/static/chunks/webpack.js?ts=1663273974032 (1303:46)
<unknown>
/_next/static/chunks/main.js (9:61)

Hi Guys, i have an case is this possible to combine an vertical section scroll and Horizontal scroll?

Hello 👋

I'm trying to create a button which, when clicked, will scroll the page down to a given Ref/ID/etc.

I'm struggling to figure out how to implement this from the docs.

What I have currently is roughly the following:

import { useLocomotiveScroll } from "react-locomotive-scroll";


const MyPage = () => {

const { scroll } = useLocomotiveScroll();


return (
    [...]
      <button onClick={(scroll) => scroll.scrollTo("#test", { duration: 1000 })>
        Click me
      </button>
      <DestinationDiv id="test" />
    [...]
  )
}

I've also initialized <LocomotiveScrollProvider> within my _app.js which wraps my entire app.

What am I doing wrong here?

I keep getting the following error: Unhandled Runtime Error: TypeError: scroll.scrollTo is not a function

I've already flagged the code change responsible for this.

Basically, the warning is logged before locomotive-scroll is loaded. So the warning is irrelevant at that point since it's not in fact due to configuration or usage issues.

The warning should be adapted to only log after the lib is loaded.

My NextJS app uses react-locomotive-scroll in the _app.tsx which works well:

import { LocomotiveScrollProvider as RLSProvider } from "react-locomotive-scroll";

import { useRef } from "react";
import { LocomotiveScrollProvider as RLSProvider } from "react-locomotive-scroll";
import "locomotive-scroll/dist/locomotive-scroll.css";
import "../styles/index.css";

function MyApp({ Component, pageProps }: AppProps) {
  const { asPath } = useRouter();
  const containerRef = useRef(null);
  return (
    <RLSProvider
      options={{
        smooth: true,
        smartphone: {
          smooth: true,
        },
        tablet: {
          smooth: true,
        },
      }}
      watch={[]}
      location={asPath}
      onLocationChange={(scroll: any) =>
        scroll.scrollTo(0, { duration: 0, disableLerp: true })
      }
      containerRef={containerRef}
    >
      <div data-scroll-container ref={containerRef}>
        <Component {...pageProps} />
      </div>
    </RLSProvider>
  );
}

However, in my index.tsx which looks like the following, I cannot get the scroll.on function to work to report back the scroll position.

import { useLocomotiveScroll } from "react-locomotive-scroll";
const Index = () => {
const { scroll } = useLocomotiveScroll();

useEffect(() => {
        scroll.on("scroll", function (instance) {
      console.log(instance.scroll.y);
    });
  });
  return (
    <>
      <div className="flex flex-col">
        <HeaderMenu {...headerMenu} />
        <main data-scroll-container className="grow pt-24 pb-32 md:pb-48">
          {some content here}
        </main>
        <FooterMenu />
      </div>
    </>
  );
};

This always returns the error that data-scroll-container has not been defined.

Hey and thanks for this wrapper! It helps a lot!

I've some issues when I use Next-image with the height of the container. Each time the page is loaded, the container has a different height.
It seems to be related to the fact of not indicating a size to the image component (I use the layout=fill option) and
not using the priority tag.

What can I do to fix that? Thanks!

this is my code

`

        <div
          data-scroll
          id="scroll-container flex place-items-center bg-green-900 w-1/2 relative"
        >
          <div
            className="fixed bg-pink-900 "
            data-scroll
            data-scroll-sticky
            data-scroll-target="#scroll-container"
          >
            <Image
              src="/posts/insta-1.jpg"
              width={500}
              height={500}
              alt="img"
            ></Image>
          </div>
        </div>
      </div>`

With a long page, if you scroll down and then back up to the top of the page, the data-scroll element placed at the top disappears.
The element does not appear when scrolling to the topmost point up.

Apparently, this occurs when the overall Height exceeds about 2700px.
It was occurring in Chrome and not in Safari.

■Before Scrolling

■When backing up to the top after scrolling down

my code

App.jsx

function App() {
  const containerRef = useRef(null);
  return (
    <>
      <LocomotiveScrollProvider
        options={{
          smooth: true,
          // ... all available Locomotive Scroll instance options
        }}
        watch={
          [
            //..all the dependencies you want to watch to update the scroll.
            //  Basicaly, you would want to watch page/location changes
            //  For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters)
          ]
        }
        containerRef={containerRef}
      >
        <main data-scroll-container ref={containerRef} className="container">
          <div data-scroll-section>
            <ScrollTest />
          </div>
        </main>
      </LocomotiveScrollProvider>
    </>
  );
}

ScrollTest.jsx

export function ScrollTest() {
  return (
    <>
      <p>testetestes</p>
      <h1 data-scroll data-scroll-speed="1">
        hey
      </h1>
      <p>testestests</p>
      <p>testestests</p>
      <div
        style={{ height: "2600px", width: "100%", backgroundColor: "red" }}
      ></div>
    </>
  );
}

While going through the documentation to use the package, I noticed the first paragraph under the "Specific cases" section, which reads:

If you want to write some code applied only when the location change but not when the rest of your dependencies added to the watch list change, here the thing:

This is not so readable, or grammatically correct, and would like to fix this.

Attempting scroll to top when the exit animation completes. Any ideas? The following throws the error:
TypeError: Cannot read properties of null (reading 'scrollTo')

import "../styles/globals.css";
import "../styles/locomotive-scroll.css";
import { useRef } from "react";
import { LocomotiveScrollProvider } from "react-locomotive-scroll";
import { useLocomotiveScroll } from "react-locomotive-scroll";
import { useRouter } from "next/router";
import { AnimatePresence } from "framer-motion";

function MyApp({ Component, pageProps }) {
  const containerRef = useRef(null);
  const { asPath } = useRouter(); // With next/router
  const { scroll } = useLocomotiveScroll();

  return (
    <>
      <div className="app dark">
        <LocomotiveScrollProvider
          options={{
            smooth: true,
            mobile: {
              smooth: false,
            },
            tablet: {
              smooth: false,
            },
            // ... all available Locomotive Scroll instance options
          }}
          location={asPath}
          containerRef={containerRef}
          // onLocationChange={(scroll) =>
          //   scroll.scrollTo(0, { duration: 0, disableLerp: true })
          // }
        >
          <main
            className="main dark:bg-black"
            data-scroll-container
            ref={containerRef}
          >
            <AnimatePresence
              exitBeforeEnter
              initial={true}
              onExitComplete={() =>
                scroll.scrollTo(0, { duration: 0, disableLerp: true })
              }
            >
              <Component {...pageProps} key={asPath} />
            </AnimatePresence>
          </main>
        </LocomotiveScrollProvider>
      </div>
    </>
  );
}

export default MyApp;

This thing doesn't work at all when using React 18!!! I've did exactly as the docs say, but I get only bugged version of smooth scroll.

I'm also using GSAP’s scrolltrigger which does not allow for the use of any data-scroll attributes. If I remove data-scroll-container from _app.tsx, however, it breaks the Locomotive Scroll and returns "Cannot read properties of null (reading 'offsetHeight'). I have instead already applied the "el" option:

<LocomotiveScrollProvider
        options={{
          el: containerRef.current,
          smooth: true,
        smartphone: {
          smooth: true,
        },
        tablet: {
          smooth: true,
        },
        }}
        watch={[]}
        location={asPath}
      onLocationChange={(scroll: any) =>
        scroll.scrollTo(0, { duration: 0, disableLerp: true })
      }
      
      containerRef={containerRef}
      >
              <div ref={containerRef}>

but that doesn't seem to work either. Is there another way?

I am using LocomotiveScroll in a React application and I have created a custom hook called useLocoScroll to handle the initialization and destruction of the LocomotiveScroll instance in order to make LocomotiveScroll work with gsap's ScrollTrigger. The hook works fine and I can use it to enable smooth scrolling and also use the ScrollTrigger in my app.

However, I now need to access the LocomotiveScroll instance from outside the hook so that I can call its methods directly. Specifically, I want to be able to call the scrollTo method on the nav buttons to scroll to a specific section.

The way I have it set up now is so I can use it like so const scroll = useLocoScroll(true) in multiple files and destroy... I think only the last instance.

How can I modify this hook to allow me to access and use the LocomotiveScroll instance outside the hook without creating a new lomocotiveScroll instance every time?

Menu Component
const scroll = useLocoScroll(true); const handleLinkClick = (url) => { toggleNav && setToggleNav(false); scroll.scrollTo(url, { offset: 0, duration: 600, easing: [0.25, 0.0, 0.35, 1.0], disableLerp: true, }); };

App.jsx
` const scroll = useLocoScroll(true);
const { pathname } = useLocation();

useEffect(() => {
if (scroll) {
scroll.scrollTo('top', {
offset: 0,
duration: 600,
easing: [0.25, 0.0, 0.35, 1.0],
disableLerp: true,
});
}
}, [pathname]);`

Custom Hook

`import { useRef, useLayoutEffect } from 'react';
import LocomotiveScroll from 'locomotive-scroll';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

let locoScroll;

const useLocoScroll = (start) => {
const scrollRef = useRef(null);

useLayoutEffect(() => {
if (!start) return;

const scrollEl = document.querySelector('.App');

if (!locoScroll) {
  locoScroll = new LocomotiveScroll({
    el: scrollEl,
    smoothMobile: false,
    smooth: true,
    multiplier: 1,
  });

  locoScroll.on('scroll', ScrollTrigger.update);

  ScrollTrigger.scrollerProxy(scrollEl, {
    scrollTop(value) {
      if (locoScroll) {
        return arguments.length
          ? locoScroll.scrollTo(value, 0, 0)
          : locoScroll.scroll.instance.scroll.y;
      }
      return null;
    },
    scrollLeft(value) {
      if (locoScroll) {
        return arguments.length
          ? locoScroll.scrollTo(value, 0, 0)
          : locoScroll.scroll.instance.scroll.x;
      }
      return null;
    },
    getBoundingClientRect() {
      return {
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight,
      };
    },

    pinType: document.querySelector('.App').style.transform
      ? 'transform'
      : 'fixed',
  });

  const locoScrollUpdate = () => {
    if (locoScroll) {
      locoScroll.update();
    }
  };

  new ResizeObserver(() => {
    if (locoScroll) {
      locoScroll.update();
    }
  }).observe(document.querySelector('[data-scroll-container]'));

  ScrollTrigger.addEventListener('refresh', locoScrollUpdate);
  ScrollTrigger.refresh();
}

scrollRef.current = locoScroll;

return () => {
  if (scrollRef.current === locoScroll) {
    ScrollTrigger.removeEventListener('refresh', locoScroll.update);
    locoScroll.destroy();
    locoScroll = null;
  }
};

}, [start]);

return scrollRef.current;
};

export default useLocoScroll;
`

Sorry for the weird code tags. I tried to fix it.

Currently, I am experiencing an issue where adding a hash value to the URL (such as #something) causes unexpected behavior when I refresh the page. This occurs because I am using the Link component from react-router for the navigation buttons. Although there are no errors displayed, the layout breaks in an unexpected way.

Hey, I noticed a pretty significant issue.
Basically, the scroll position is preserved between pages/routes.

The container height does seem to update, and the scrollbar behaves normally.

Current behavior:

• From page has a scroll position of y: 1145
• To page lands on scroll position of y: 1145

Expected behavior:

When landing on a new page, the scroll position should be 0, 0 (top of the page).

• From page has a scroll position of y: 1145
• To page lands on scroll position of y: 0

If you need more info can draft a repro, thanks

Hello,

Thanks for making this port. I came across this issue. I'm running Gatsby v3 and initialized by app like so in layout.js :
`<LocomotiveScrollProvider
options={
{
smooth: true,

          // ... all available Locomotive Scroll instance options 
        }
      }
      watch={
        [
          //...all the dependencies you want to watch to update the scroll
        ]
      }
      containerRef={containerRef}
    >
      <div data-scroll-container ref={containerRef}>
        <main>{children}</main>
        <Footer />        
      </div>
    </LocomotiveScrollProvider>`

Then in my index.js page, I call the scroll variable:
const scroll = useLocomotiveScroll();

When I log the object to the console, it appears to be missing many things, including the scrollTo function. This is all that is in the scroll variable.
{ "scroll": null, "isReady": false }

If I initialize the variable as const {scroll}= useLocomotiveScroll(); - I get undefined.

Can you please help?

Thanks in advance :)

Idea that may improve code quality but could affect bundle size is to replace the import of locomotive-scroll by using https://github.com/gregberge/loadable-components

I get undefined. I'm not sure what I am doing incorrectly here. I have access to the scroll object.

const { scroll } = useLocomotiveScroll()

Shouldn't this scroll object provide the Y position? Might be missing something, thank you.

The issue is described on the main LocomotiveScroll Github here .

There is a temporary fix noted here, please add this to documentation or this package.

const { scroll } = useLocomotiveScroll()
I have used this hook to get an instance of scroll but is returning null in one of my component. The rest of the setup is done according to the documentation.

Hi all,

I have some probleme with the scroll. I manage to reach a section with the scrollTo function but when i scroll up my sections appear randomly and blink. Then, i got two (sometimes more) custom scrollbar in the DOM.

Any idea ?

Thanks for your help.

I keep looking for ways to make this feature in the original locomotive scroll work..
Are there any examples of the "data-scroll-call" attribute and how to structure the function it calls?

help me please.....
my website have a some Routes and when i change the path the scroll has a problem and doesn't reset scroll size
and it has problem in each page

Hello guys,

I'm trying to follow every issues and add fixes for the different cases but the time I can allow to maintain this project is quite low. If something would like to help me improving the module it could be cool!

thank you 🤘🏻

Hi there, is it possible to include an example on how to setup react-locomotive-scroll in nextjs with both different directions included?

help me please.....
my website have a some Routes and when i change the path the scroll has a problem and doesn't reset scroll size
and it has problem in each page

in LoloScroll component :

import { LocomotiveScrollProvider } from "react-locomotive-scroll";
import "locomotive-scroll/src/locomotive-scroll.scss";
import {useLocation} from 'react-router-dom'

import React, { useRef } from "react";

const LocoScroll = ({children}) => {
const containerRef = useRef(null);
const { pathname } = useLocation()
return (
<LocomotiveScrollProvider
options={{
smooth: true,
}}
watch={ [ ] }
location={pathname}
onLocationChange={scroll => scroll.scrollTo(0, { duration: 0, disableLerp: true })} // If you want to reset the scroll position to 0 for example
containerRef={containerRef}
>

export default LocoScroll;

Hi @toinelin thanks for this package a lot, I wanted to know what props we should add to the provider to avoid any weird scroll behaviors.

I have a component with data-scroll-call="testEvent" and I am trying to make it fire the event when the component is in view. here is the component:

 <section
      id="education"
      className="education"
      data-scroll-section
      data-scroll
      data-scroll-class="purpleColor"
      data-scroll-call="testEvent2"
    > 
    ... 
</section>

I attached an event listener to the document as follows:

  useEffect(() => {
    on("call", () => console.log("test event"));
  }, []);

Where on is this function:

function on(eventType, listener) {
  document.addEventListener(eventType, listener);
}

But no event is fired! any fix?

This issue is also related to the fact that scroll.on() does not exists, but It seems the problem is deeper since adding the event listener manually does not help either.

Long shot but does anyone have an example of how I would add Locomotive as a proxy for GSAP scrolltrigger with this package (as seen here with vanilla JS) -> https://codepen.io/GreenSock/pen/zYrELYe

Hi! I just followed the install instructions in the readme, then I got this error:

./node_modules/react-locomotive-scroll/module/LocomotiveScroll.context.js:4:0
Module not found: Can't resolve 'tslib'
null

Any idea why this happens, and how I can make it work?

I dont know what I may be doing wrong but I keep getting module not found even tho I have locomotive installed

this is my package.json dependencies