Next.js Discord

Discord Forum

How to use animations library like 'locomotive-scroll' in nextjs app router?

Unanswered
Mossyrose gall wasp posted this in #help-forum
Open in Discord
Original message was deleted.

7 Replies

Mossyrose gall wasp
bump
Original message was deleted
joulev
can you show me your best attempt so far?
what have you tried and still failed to get it to work?
Mossyrose gall wasp
i deleted my all attempts 😞 my text stayed below footer and no animation. i tried to follow this blog: https://css-tricks.com/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects/
Mossyrose gall wasp
//my context
'use client';

import { ReactNode, createContext, useEffect, useMemo, useState } from 'react';

export const LocoScrollContext = createContext({
  scroll: null
});

type SmoothScrollProviderProps = {
  children: ReactNode;
  options?: any;
};

export const LocoScrollProvider = ({
  children,
  options
}: SmoothScrollProviderProps): JSX.Element => {
  const [scroll, setScroll] = useState<any>(null);

  useEffect(() => {
    if (!scroll) {
      (async () => {
        try {
          const LocomotiveScroll = (await import('locomotive-scroll')).default;

          const scrollInstance = new LocomotiveScroll({
            el: document.querySelector('[data-scroll-container]') as HTMLElement,
            ...options
          });

          setScroll(scrollInstance);
        } catch (error) {
          throw new Error(`[SmoothScrollProvider]: ${error}`);
        }
      })();
    }

    return () => {
      if (scroll !== null) {
        scroll.destroy();
      }
    };
  }, [scroll]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <LocoScrollContext.Provider value={useMemo(() => ({ scroll }), [scroll])}>
      {children}
    </LocoScrollContext.Provider>
  );
};

LocoScrollContext.displayName = 'LocoScrollContext';
LocoScrollProvider.displayName = 'LocoScrollProvider';
//my root layout
<html>
      <body className="bg-c2">
        <div data-scroll-container>
          <Navbar />
          <main>{children}</main>
          <Footer dict={dict?.Shared?.Footer} />
        </div>
      </body>
    </html>
//my homepage
<LocoScrollProvider options={{ smooth: true }}>
      <HomeHero />
      <ScrollDirectionText />
    </LocoScrollProvider>