Implement Smooth Scroll & Parallax Effect in Next.js using Lenis and GSAP
HTML-код
- Опубликовано: 21 июл 2024
- In this tutorial we will learn to implement how to add smooth scrolling with parallax effect in Next.js!🤩
Demo Link🖤: smooth-scroll-next-js.vercel....
Blog📖: devdreaming.com
-----------------------------------------------------------------------------------------------------------
Final CODE:
➡ Link 💚(Give ⭐ to the repo): github.com/codebucks27/Smooth...
-----------------------------------------------------------------------------------------------------------
Hey there 👋,
In this tutorial, we'll learn to implement smooth scrolling website
Here's what you'll learn in this tutorial:
🌟 How to add smooth scroll in Next.js project
🌟 How to implement parallax effect with this smooth scroll using GSAP
🌟 How to add parallax effect on different elements
🌟 How to use events like onScroll in smooth scroll
For this project, we're going to use:
🌟 Next.js
🌟 Lenis Scroll
🌟 GSAP
Whether you're a complete beginner or an experienced web developer, this next.js tutorial will teach you everything you need to know implement smooth scroll in your next.js website.
Like, Sub🥂 & Share! ♥
Follow me on 👇:
Twitter🐤 : / code_bucks
LinkedIn 🔗: / codebucks
Instagram 📫: / code.bucks
Email 📧: codebucks27@gmail.com
Learn More About,
⭐ • Next.js Blog Tutorial:...
⭐ • How to Create a Stunni...
⭐ • React Website Tutorial...
⭐ • 🔥Build a Stunning Fash...
⭐ • 🔥Create an NFT Collect...
⭐ • 🔥Build a Stunning Port...
⭐ • Build Websites Using N...
⭐ • Build Websites with Re...
Timestamps⌛:
Intro + Demo @00:00:00
Setup & Installation @00:02:24
Adding Lenis smooth scroll @00:04:20
Add Images @00:06:56
Adding Parallax Effect @00:13:10
Implement scrollTo method @00:25:15
Disclaimer:
All videos are for educational purposes only, please use them wisely.
#gsap
#parallaxeffect
#nextjstutorial
Glad I could help!
Thanks bro
Would love to see more animation tutorials using next js
Sure thing! More to come👍
Thanks Man, you saved a lot of time ❤
Glad to hear that!
hey bro i have issue with lenis, its not scrolling to the bottom of the page, which means i cant able to see the footer do u have any idea how to fix it. i am not using rect package, normal lenis in next js
Hey, can you share your code repo or anything that can help me debug the issue? You can invite me to your repo. my email is codebucks27@gmail.com
Why are you so underrated ?
Well trying to figure it out😜
@@CodeBucks Still lots to improve
Hi, for the parallax: sometimes the children are moving up or down on the page load. i tried to fix this by adding extra margin and moving them lower to their original position but this causes them to move a second after the page loads, due to the parallax component. Any way to fix this?
Usually in parallax effect the elements should not move unless you scroll. Why are you moving the elements on page load? Could you explain the type of animation that you are trying to achieve?
they are moving automatically even before i scroll, i thought maybe i made a mistake somwhere so i tried to copy your code and got the same result. All the children of the parallax component just move up if there speed is negative or down if their speed is positive when the page first loads@@CodeBucks
How to start learning javascript and where can you suggest
How much do you know about the JavScript till now? Based on that I can give you suggestions.
doesnt making the lenis wrapper comp "use client" also all children "use client"?, sry im new to nextjs
Any component that requires interaction with DOM or user then you should include "use client" directive at the top of the component. Could you explain a bit more about lenis issue?
Bhai ek nextjs ka acha portfolio bnwa do updated version
Yes bro will do!
good tutorial however the smooth scroll will not work well with Chrome or Safari, but works fine in firefox. There are a bunch or articles online about this. Not sure why it is working for you, but for me it was not.
I think it's working fine on chrome, I have also used it in my other project. I don't know why it's not working for you. Can you share any one article that you have mentioned?
same bro its not working for me on chrome
i'm allergic to gsap. it cost money on commercial projects.
You are right for some plugins you have to pay money if you are using them in commercial projects but most of the plugins are open sources so I guess you can use them. If you don't want to use gsap then I'd suggest you can check react-spring as well.
framer-motion is better than GSAP and completely free