0

I have installed Locomotive scroll and React Transition Group. but when I click on the link or open a page I can't scroll anymore and it will stick at the top of the screen. I have added scroll.destory() in my useEffect but it doesn't work.

What should I do?

import { useEffect } from 'react';
    import Head from 'next/head';
    import { SwitchTransition, Transition } from 'react-transition-group';
    import gsap from 'gsap';
    import '@/styles/styles.scss';
    
    export default function MyApp({ Component, pageProps, router }) {
      function enter(node) {
        gsap.from(node, {
          duration: 0.5,
          autoAlpha: 0,
        });
      }
    
      function exit(node) {
        gsap.to(node, {
          duration: 0.5,
          autoAlpha: 0,
        });
      }
      useEffect(() => {
        let scroll;
        import('locomotive-scroll').then(
          (locomotiveModule) => {
            scroll = new locomotiveModule.default({
              el: document.querySelector('[data-scroll-container]'),
              smooth: true,
              smoothMobile: false,
              resetNativeScroll: true,
            });
          },
        );
    
        // `useEffect`'s cleanup phase
        return () => scroll.destroy();
      }, []);
    
      return (
        <>
          <SwitchTransition>
            <Transition
              key={router.pathname}
              timeout={100}
              in={true}
              onEnter={enter}
              onExit={exit}
            >
              <main data-scroll-container className="container">
                <Component {...pageProps} />
              </main>
            </Transition>
          </SwitchTransition>
        </>
      );
    }
Dark star
  • 5,192
  • 9
  • 35
  • 54
  • Have you tried setting up your `useEffect` as described in [How to correctly use Locomotive Scroll with Next.js routing?](https://stackoverflow.com/a/68348642/1870780)? Also, shouldn't `[router.asPath]` be in the `useEffect`'s dependencies array instead? – juliomalves Aug 17 '21 at 13:17
  • 1
    @juliomalves I used that but still the same. I thinking it has something to do with `react-transition-group`. because without it works perfectly. – Dark star Aug 17 '21 at 16:27

0 Answers0