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

> Learn how to add smooth scrolling with a parallax effect in Next.js using Lenis Scroll and GSAP. Build modern websites with animations that captivate users.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/smooth-scrolling-parallax-effect-nextjs
- **Author:** CodeBucks
- **Published:** 2023-12-03
- **Last updated:** 2025-01-23
- **Topics:** Animation, Next.js

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=QNh0MH-G3OM)**

### Overview

In this tutorial, we'll dive into creating a stunning smooth scrolling website with a parallax effect using **Next.js**, **Lenis Scroll**, and **GSAP**. Whether you're a beginner or an experienced developer, this guide will walk you through every step to make your website look modern and professional.

Explore the **live demo** here: [Smooth Scrolling Demo](https://smooth-scroll-next-js.vercel.app/)

If you're curious about web development and design, this project will provide you with the skills and insights to build a dynamic, interactive website.

### What You'll Learn

Here's what this tutorial covers:  
🌟 Adding smooth scrolling to a **Next.js** project  
🌟 Implementing the parallax effect with smooth scrolling using **GSAP**  
🌟 Creating parallax effects on different elements  
🌟 Using events like `onScroll` in smooth scrolling

### Key Features of This Portfolio Website

- **Smooth Scroll Functionality:** Enhance user experience with seamless scrolling.
- **Parallax Effects:** Add depth to your design with stunning parallax animations.
- **Event Integration:** Handle scroll events to control animations dynamically.
- **Optimized Performance:** Built using modern libraries for smooth and efficient rendering.

### Libraries Used

To create this website, we used the following tools:

- [**Next.js**](https://nextjs.org/)**:** React-based framework for building fast websites.
- [**Lenis Scroll**](https://lenis.studiofreight.com/)**:** Smooth scrolling library for buttery-smooth transitions.
- [**GSAP**](https://gsap.com/)**:** Robust animation library for creating complex effects.
- [**Lorem Picsum**](https://picsum.photos/)**:** Placeholder images to enhance visuals.

### Code Links

You can find the complete project code here:  
➡ **GitHub Repository:** [Smooth Scroll Next.js Repo](https://github.com/codebucks27/Smooth-Scroll-Next.js)  
Don't forget to give the repo a ⭐ if you like it!

### Resources

- **Framework:** [Next.js](https://nextjs.org/)
- **Smooth Scroll Library:** [Lenis Scroll](https://lenis.studiofreight.com/)
- **Animation Library:** [GSAP](https://gsap.com/)
- **Image Source:** [Lorem Picsum](https://picsum.photos/)

### Time Stamps

Here's a breakdown of the steps:

- Intro + Demo [@00:00:00](https://www.youtube.com/watch?v=QNh0MH-G3OM&t=0s)
- Setup & Installation [@00:02:24](https://www.youtube.com/watch?v=QNh0MH-G3OM&t=144s)
- Adding Lenis smooth scroll [@00:04:20](https://www.youtube.com/watch?v=QNh0MH-G3OM&t=260s)
- Add Images [@00:06:56](https://www.youtube.com/watch?v=QNh0MH-G3OM&t=416s)
- Adding Parallax Effect [@00:13:10](https://www.youtube.com/watch?v=QNh0MH-G3OM&t=790s)
- Implement scrollTo method [@00:25:15](https://www.youtube.com/watch?v=QNh0MH-G3OM&t=1515s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._