Implement Smooth Scroll & Parallax Effect in Next.js using Lenis and GSAP

In this tutorial we will learn to implement how to add smooth scrolling with parallax effect in Next.js!🤩

Demo Link🖤: https://smooth-scroll-next-js.vercel....

Blog📖: https://devdreaming.com

-----------------------------------------------------------------------------------------------------------
Final CODE:
➡ Link 💚(Give ⭐ to the repo): https://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 📧: [email protected]

Learn More About,

⭐    • Next.js Blog Tutorial: Build SEO Opti...  
⭐    • How to Create a Stunning Portfolio We...  
⭐    • React Website Tutorial: ⭐Build Featur...  
⭐    • 🔥Build a Stunning Fashion Studio Webs...  
⭐    • 🔥Create an NFT Collection Website Lan...  
⭐    • 🔥Build a Stunning Portfolio Website w...  
⭐    • Build Websites Using Next.js  
⭐    • Build Websites with React JS  

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