You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello all! I am trying to get Lenis smoothscroll on my whole website. I want to initialise in it my layout.jsx file but I am having troubles setting it up right.
I added my code below. If I do not add 'use client' I get a ReactServerComponentsError stating I need to add the 'use client'. If I do that I get a error related to the meta data. But If I remove the metadata my page does not scroll anymore. I added both errors as images to this post. Has somebody achieved this behaviour yet? Or is somebody willing to help me out?
Cheers!
'use client'
import Header from '@/components/Header/Header'
import { Layout } from '@/components/utility/dom/Layout'
import { Inter } from 'next/font/google'
import Lenis from '@studio-freight/lenis'
import '@/global.css'
import { useEffect } from 'react'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export const metadata = {
title: 'Threedee playground',
description: 'Threedee playground',
}
export default function RootLayout({ children }) {
useEffect(() => {
const lenis = new Lenis()
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
})
return (
// eslint-disable-next-line tailwindcss/no-custom-classname
<html lang='en' className={`antialiase ${inter.className}`}>
<head />
<body>
<Layout>
<Header />
{children}
</Layout>
</body>
</html>
)
}
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello all! I am trying to get Lenis smoothscroll on my whole website. I want to initialise in it my layout.jsx file but I am having troubles setting it up right.
I added my code below. If I do not add 'use client' I get a ReactServerComponentsError stating I need to add the 'use client'. If I do that I get a error related to the meta data. But If I remove the metadata my page does not scroll anymore. I added both errors as images to this post. Has somebody achieved this behaviour yet? Or is somebody willing to help me out?
Cheers!
Beta Was this translation helpful? Give feedback.
All reactions