← Back to snippets

Lenis/React With Motion Wrapper

  • React.js
  • Motion
  • Typescript

The Code

import { ReactNode, useEffect, useRef } from "react";

import { LenisRef, ReactLenis } from "lenis/react";
import { cancelFrame, frame } from "motion";

const LenisWrapper = ({ children }: { children: ReactNode }) => {
    const lenisRef = useRef<LenisRef>(null);

    useEffect(() => {
        function update(data: { timestamp: number }) {
            const time = data.timestamp;
            lenisRef.current?.lenis?.raf(time);
        }

        frame.update(update, true);

        return () => cancelFrame(update);
    }, []);

    return (
        <ReactLenis root options={{ autoRaf: false }} ref={lenisRef}>
            {children}
        </ReactLenis>
    );
};

export default LenisWrapper;

Credits