Correct Way to Integrate Motion and Lenis with React 18.3.1 in Vite?

[DavidAyoa]

Please i came up with this but i'm not exactly sure if this is the way to use the new 'motion' library with lenis and typescript in [email protected] (vite as builder). Is this correct?

This here is my App.tsx:

import { useEffect, useRef } from 'react'
import { LenisRef, ReactLenis } from 'lenis/react'
import { cancelFrame, frame } from "motion/react"
import Preloader from './components/Preloader'

interface FrameData {
  delta: number;
  timestamp: number;
  isProcessing: boolean;
}

function App() {
  const lenisRef = useRef<LenisRef | null>(null);

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

    frame.update(update, true)
    console.log(lenisRef)

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

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

export default App

[mwx0621]

The same problem encountered.
Simply add root to ReactLenis Component will solve it. However, root, as the document here declared, will make the lenis instance provided by the context to be based on html scroll. This sounds no good for me.

I tried to add the css file provided by lenis, but this did not solve the problem.

From the implementation of ReactLenis, the component is built with lenis wrapper and content element already set, but the wrapper is not made overflow: scroll itself.
I solve this by simply add style to the wrapper to make sure the content was in a container scrollable.

<ReactLenis
    style={{
        width: "100%",
        height: "100%",
        overflow: "scroll", // this should work
    }}
    options={{
        autoRaf: false,
     }}
     ref={lenisRef}
 >
     ...
 </ReactLenis>

[DavidAyoa]

You're absolutely right! However, in my case, this approach worked perfectly. You can see it live on my portfolio (which is still in progress) at dayoa.vercel.app.

Here's the relevant code:

import './App.css'
import { useEffect, useRef, useState } from 'react'
import { LenisRef, ReactLenis } from 'lenis/react'
import { cancelFrame, frame } from "motion/react"
import Preloader from './components/Preloader'
import Navigation from './components/Navigation'
import Intro from './components/Intro'
import FrontendHero from './components/FrontendHero'
import Footer from './components/Footer'
// import BackendHero from './components/BackendHero'
// import About from './components/About'

interface FrameData {
  delta: number
  timestamp: number
  isProcessing: boolean
}

function App() {
  const lenisRef = useRef<LenisRef | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    function update(data: FrameData) {
      if (lenisRef.current?.lenis) {
        lenisRef.current.lenis.raf(data.timestamp)
      }
    }

    frame.update(update, true)
    return () => {
      cancelFrame(update)
    }
  }, [])

  return (
    <div className='bg-primary-light'>
      <Preloader onLoadingComplete={() => setIsLoading(false)} />
      <ReactLenis 
        options={{ 
          autoRaf: false,
          smoothWheel: true,
          wheelMultiplier: 1,
          touchMultiplier: 2,
        }} 
        ref={lenisRef} 
        className={`font-satoshi flex justify-center items-center h-[300vh] transition-opacity duration-500 ${
          isLoading ? 'opacity-0' : 'opacity-100'
        } ${isLoading ? 'mt-[100vh]' : 'mt-0'}`} 
        root
      >
        <div className='bg-primary-light'>
          {!isLoading && <Navigation />}
          <Intro />
          <FrontendHero />
          {/* <BackendHero /> */}
          {/* <About /> */}
          {!isLoading && <Footer />}
        </div>
      </ReactLenis>
    </div>
  )
}

export default App