Loading...
Loading...
Compare original and translation side by side
@studio-freight/lenislenis@studio-freight/lenislenisnpm install lenisnpm install lenisundefinedundefinedsrc/lib/lenis.tssrc/components/SmoothScroll.tsx// src/components/SmoothScroll.tsx
'use client'
import { ReactNode, useEffect } from 'react'
import Lenis from 'lenis'
export default function SmoothScroll({ children }: { children: ReactNode }) {
useEffect(() => {
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: 'vertical',
gestureOrientation: 'vertical',
smoothWheel: true,
})
function raf(time: number) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
return () => {
lenis.destroy()
}
}, [])
return <>{children}</>
}src/lib/lenis.tssrc/components/SmoothScroll.tsx// src/components/SmoothScroll.tsx
'use client'
import { ReactNode, useEffect } from 'react'
import Lenis from 'lenis'
export default function SmoothScroll({ children }: { children: ReactNode }) {
useEffect(() => {
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: 'vertical',
gestureOrientation: 'vertical',
smoothWheel: true,
})
function raf(time: number) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
return () => {
lenis.destroy()
}
}, [])
return <>{children}</>
}layout.tsximport SmoothScroll from '@/components/SmoothScroll'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<SmoothScroll>
{children}
</SmoothScroll>
</body>
</html>
)
}layout.tsximport SmoothScroll from '@/components/SmoothScroll'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<SmoothScroll>
{children}
</SmoothScroll>
</body>
</html>
)
}requestAnimationFramescrollRestoration// Inside useEffect
// lenis.on('scroll', ScrollTrigger.update)
// gsap.ticker.add((time)=>{lenis.raf(time * 1000)})
// gsap.ticker.lagSmoothing(0)requestAnimationFramescrollRestoration// Inside useEffect
// lenis.on('scroll', ScrollTrigger.update)
// gsap.ticker.add((time)=>{lenis.raf(time * 1000)})
// gsap.ticker.lagSmoothing(0)