brunos3d / nextjs-with-locomotive-scroll-example

▲ NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental)

nextjs-with-locomotive-scroll-example

🔺 NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental)

🚀 Demo

🚀 Getting started

The best way to start with this template is using create-next-app.

npx create-next-app ts-next -e https://github.com/brunos3d/nextjs-with-locomotive-scroll-example

or

yarn create next-app -e https://github.com/brunos3d/nextjs-with-locomotive-scroll-example

📝 License

This project is licensed under the MIT License - see the LICENSE.md file for more information.

nextjs-with-locomotive-scroll-example's Issues

Use without data-scroll-container

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?

Unable to use any other Animation Library

I am encountering an issue where I am unable to use any other animation library that observes the scroll with Locomotive. Specifically, I wanted to use Scrollreveal.js but it doesn't work after implementing the RLSProvider. Is there any solution or workaround available for this problem?