# 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](/videos/category/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. For the implementation details and common integration pitfalls, read the companion [Next.js Lenis and GSAP guide](/blogs/nextjs-smooth-scrolling-with-lenis-gsap).

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; see a different GSAP workflow in the [React fashion studio project](/videos/build-stunning-fashion-studio-website-with-reactJS-locomotive-scroll-gsap).
- **Event Integration:** Handle scroll events to control animations dynamically.
- **Optimized Performance:** Built using modern libraries for smooth and efficient rendering, supported by these [website performance optimization techniques](/blogs/website-performance-optimization-for-loading-website-faster).

### 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._