-
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:
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
The same problem encountered. 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 <ReactLenis
style={{
width: "100%",
height: "100%",
overflow: "scroll", // this should work
}}
options={{
autoRaf: false,
}}
ref={lenisRef}
>
...
</ReactLenis> |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
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: