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

Опубликовано: 19 Февраль 2025
на канале: CodeBucks

21,047

327

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

__________________________________
🚀 Become an AI Engineer with JavaScript!🚀
Level up your skills by learning AI with Scrimba's AI Engineer Path. Unlike other platforms, Scrimba’s unique scrim format allows you to learn by doing. You’ll also explore courses created by domain experts including Hugging Face, LangChain, and Mistral, offering expert-backed content. Scrimba is also partnered with Mozilla MDN to ensure top-tier learning experiences.

👉 Join here (Get 20% discount🤩): https://v2.scrimba.com/the-ai-enginee...
__________________________________

➡️Need Web Development or AI Solutions Services? 🚀
Let's bring your ideas to life!
Contact Me From Here: https://tally.so/r/wdlj0N

-----------------------------------------------------------------------------------------------------------
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. There may be affiliate links in the description, meaning I may earn a small commission at no extra cost to you if you make a purchase.

#gsap
#parallaxeffect
#nextjstutorial