is this how its done by creating a component: "use client"; import { ReactLenis } from "@studio-freight/react-lenis"; function SmoothScrolling({ children }) { return (
Haven't used the ReactLenis component, but seems like it could work. You can also use the technique from the video (setting up in useEffect) and just convert the surround page to a client component.
Hi @nahuelscheytt, I've encountered challenges implementing Lenis smooth scrolling with the Next.js 14 app router. Could you please provide some guidance on how to set it up with the app router? Thanks in advance!
@@tekemutau6583 Lenis has integrated his library into one, the new library supports javascript, react and gsap. So, this works fine in next.js app router: "use client" import Lenis from "lenis" import { useEffect } from "react" export default function HomePage() { useEffect(() => { const lenis = new Lenis() function raf(time: number) { lenis.raf(time) requestAnimationFrame(raf) } requestAnimationFrame(raf) }) return }
Hey, great video but I have a question if I use lenis the page scrolls smoothly but when I try to use the Links with the hrefs to the specific ids of other pages and use the scroll-behavior: smooth the lenis stops working. Any idea on how to keep that smooth scrolling between ids without breaking lenis?
Oh that's an interesting edge case. Probably related to how Lenis overrides the scroll on the parent tag, so setting scroll-behavior messes with that. I found this SO post that offers up a couple potential solutions: stackoverflow.com/questions/77387611/smooth-scroll-doesnt-work-with-lenis-when-link-with-id-clicked
@@builtwithcode Really appreciate the response. I ended up not going with those solutions, so I will leave here what worked for me in case anyone has the same problem. Since we are using react I decided to use react-scroll lib: import { Link, animateScroll as scroll } from 'react-scroll'; And then simply replace the tags with . This way the smooth scrolling to the id's will work with lenis-scroll without any problem.
Hi @Built With Code,
Thank you for your amazing videos! Have you done a video on how to implement Lenis scroll with the Next.js app router?
is this how its done by creating a component:
"use client";
import { ReactLenis } from "@studio-freight/react-lenis";
function SmoothScrolling({ children }) {
return (
{children}
);
}
export default SmoothScrolling;
Haven't used the ReactLenis component, but seems like it could work. You can also use the technique from the video (setting up in useEffect) and just convert the surround page to a client component.
Your stuff is really good. Keep it coming and thanks for the contribution!
This was an amazing vid. Glad it randomly popped up on my TL
Glad you enjoyed it!
Really informative! You earned a sub, sir!
Glad it was helpful!
great tutorial, explained really well !
Amazing! Great video bro
nice lib for smooth-scroll, works with nextjs 14 (app router). I developed an alternative with framer-motion but it is more complex. great work
Lenis is a great plug-and-play library. Much easier than implementing in Framer Motion :)
Hi @nahuelscheytt,
I've encountered challenges implementing Lenis smooth scrolling with the Next.js 14 app router. Could you please provide some guidance on how to set it up with the app router?
Thanks in advance!
@@tekemutau6583 Lenis has integrated his library into one, the new library supports javascript, react and gsap. So, this works fine in next.js app router:
"use client"
import Lenis from "lenis"
import { useEffect } from "react"
export default function HomePage() {
useEffect(() => {
const lenis = new Lenis()
function raf(time: number) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
})
return
}
Hidden gem 😢😢
Hey, great video but I have a question if I use lenis the page scrolls smoothly but when I try to use the Links with the hrefs to the specific ids of other pages and use the scroll-behavior: smooth the lenis stops working. Any idea on how to keep that smooth scrolling between ids without breaking lenis?
Oh that's an interesting edge case. Probably related to how Lenis overrides the scroll on the parent tag, so setting scroll-behavior messes with that. I found this SO post that offers up a couple potential solutions: stackoverflow.com/questions/77387611/smooth-scroll-doesnt-work-with-lenis-when-link-with-id-clicked
@@builtwithcode Really appreciate the response. I ended up not going with those solutions, so I will leave here what worked for me in case anyone has the same problem.
Since we are using react I decided to use react-scroll lib:
import { Link, animateScroll as scroll } from 'react-scroll';
And then simply replace the tags with .
This way the smooth scrolling to the id's will work with lenis-scroll without any problem.
Amazing video ❤
top 💯
Only thing missing is responsive Navigation bar
Stay tuned for some videos on navigation bars / menus