DEV Community: Mostakim Ahamed

Pinning Images with GSAP: A Smooth Scrolling Animation in Next.js

Mostakim Ahamed — Mon, 14 Oct 2024 16:56:13 +0000

In this article, we’ll explore how to create smooth scrolling animations by pinning images using GSAP (GreenSock Animation Platform) and its ScrollTrigger plugin. This technique enhances user experience by creating dynamic effects as users scroll through your content. We’ll use Next.js and Tailwind CSS for styling, ensuring a modern look for our project.

Table of Contents

Demo
Installation
Implementation
Conclusion

Demo

Before jumping to the explanation check out the live demo of our pinning images animation on CodeSandbox or Loom

Installation

To get started, make sure you have a Next.js application set up. (Follow Next.js Installation Documentation: https://nextjs.org/docs/getting-started/installation)

Next, Tailwind CSS: (Follow tailwind Installation Documentation/Install with next js)

Next, install the necessary packages for GSAP:
npm install gsap @gsap/react

Implementation

Now, let’s create the ScrollAnimation component that will handle our pinning images animation. Here’s the complete code:

"use client";
import { useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(ScrollTrigger); // Register Gsap Scroll Trigger Plugin

// I used freepik images link for this purpose
const imageUrls = [
  "https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-sunset-surrounded-by-grass_181624-22807.jpg?ga=GA1.1.2030075610.1697991259&semt=ais_hybrid-rr-similar",
  "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?ga=GA1.1.2030075610.1697991259&semt=ais_hybrid-rr-similar",
  "https://img.freepik.com/free-photo/group-elephants-big-green-tree-wilderness_181624-16897.jpg?ga=GA1.1.2030075610.1697991259&semt=ais_hybrid-rr-similar",
  "https://img.freepik.com/premium-photo/blazing-sun-vast-savanna_1272857-120118.jpg?ga=GA1.1.2030075610.1697991259&semt=ais_hybrid-rr-similar",
  "https://img.freepik.com/free-photo/beautiful-shot-tree-savanna-plains-with-blue-sky_181624-21992.jpg?ga=GA1.1.2030075610.1697991259&semt=ais_hybrid-rr-similar",
];

const ScrollAnimation = () => {
  const imagesRef = useRef<any[]>([]); // Fix to store multiple refs

  useGSAP(() => {
    // Convert the current array of image references to a proper array for GSAP manipulation
    const images = gsap.utils.toArray(imagesRef.current);

    // Iterate over each image element
    images.forEach((panel: any, i: number) => {
      let scale = 1;

      // If the current image is not the last one, adjust the scale based on its index
      if (i !== images.length - 1) {
        scale = 0.9 + 0.025 * i; // Create a slight scaling effect for images based on their index
      }

      gsap.to(panel, {
        scale: scale,
        transformOrigin: "top center", // Specify the point from which the scaling transformation occurs
        ease: "none",

        // Configure the ScrollTrigger plugin for scroll-based animations
        scrollTrigger: {
          trigger: panel, // Set the current image as the trigger for the ScrollTrigger

          // Define when the animation should start based on the position of the trigger
          start: "top " + (70 + 40 * i), // Start the animation when the top of the panel is 70px down plus an offset based on index
          end: "bottom +=650px", // Define when the animation should end (bottom of the panel + 650px)
          endTrigger: ".end", // Specify the end trigger element
          pin: true, // Pin the current panel/image in place while it is being triggered
          pinSpacing: false, // Disable additional spacing around pinned elements
          scrub: true, // Enable scrub for smooth animation with scrolling
        },
      });
    });
  }, []);

  return (
    <div className="flex flex-col gap-12 mx-auto max-w-2xl py-12">
      {imageUrls.map((image, index) => (
        <div
          key={index}
          ref={(el) => (imagesRef.current[index] = el)}
          className=""
        >
          <img
            src={image}
            alt={`Image ${index + 1}`}
            className="w-full h-auto object-cover rounded-lg shadow-lg"
          />
        </div>
      ))}
      <div className="end"></div>
    </div>
  );
};

export default ScrollAnimation;

Understanding the Code

Image References: We create an array of references using useRef to manipulate our image elements directly.
GSAP Animations: Inside the useEffect, we loop through each image and set a scale based on its index. This creates a dynamic scaling effect as the user scrolls.
ScrollTrigger Configuration: We configure ScrollTrigger for each image, specifying when the animation starts and ends, pinning the images in place while scrolling.

Using the Component

To include the ScrollAnimation component in your Next.js application, import it into your main application file (e.g., page.tsx):

import ScrollAnimation from "./ScrollAnimation";

export default function Home() {
  return (
    <main>
      <div className="h-screen w-full flex items-center justify-center bg-[#66545e]">
        <h1 className="text-2xl font-bold">Scroll Down To See The Magic</h1>
      </div>
      {/* The ScrollAnimation Component */}
      <ScrollAnimation />
      <div className="bg-[#aa6f73] h-screen w-full flex items-center justify-center">
        <h1 className="text-2xl font-bold">Pinning Image Animation End</h1>
      </div>
    </main>
  );
}

Now run the application and boom. 💥 💥

Here is the sandbox link again: CodeSandbox

Conclusion

You now know how to pin images and create smooth scrolling animations using GSAP and ScrollTrigger in a Next.js application! This technique can greatly enhance the visual appeal of your site. Feel free to customize the images and scaling effects to match your project’s style.

If you found this article helpful, please share it on social media and leave a comment below. Happy coding! 💻😃

Creating a Responsive Navbar Using Material UI in a Next.js Project

Mostakim Ahamed — Mon, 13 May 2024 12:22:31 +0000

This is a step-by-step guide on creating a responsive navbar using Material UI in your Next.js project. Whether you're building a personal portfolio, a business website, or an e-commerce platform, a responsive navbar is essential for providing an intuitive navigation experience across various devices.

Let's dive into the process:

1. Setting Up Your Next.js Project
To kick things off, let's create a new Next.js application. Open your terminal and run the following command:



npx create-next-app@latest

Then set all necessary steps for creating a basic next js app.

2. Installing Material UI
Next, we'll install Material UI. Run the following command in your project directory:



npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

3. Cleaning Up Your Page Component
Once your project is set up, navigate to the default page component and clean it up.
We'll be integrating our navbar component into this page later on

4. Creating the Navbar Component
Now, let's create our navbar component. Inside the src folder create a folder named components. Then in your components folder, create a new file named navbar.tsx.

I've provided the complete code for the navbar component on GitHub. You can find it here.

Feel free to explore the code and customize it according to your project's needs. I have already added the necessary comments so that you can understand them easily.

5. Integrating the Navbar Component
With our navbar component created, it's time to integrate it into our main layout.
In our page file in the app directory integrate the navbar component here.

6. Starting Your Project
To see our navbar in action, run the following command in your terminal to start the Next.js development server:



npm run dev

Visit http://localhost:3000 in your web browser to view your Next.js project with the newly implemented navbar.
Yo! You have done this.

If you want more explanation you can continue with me!

7. Exploring the Code
Now, let's dive deeper into the code and explore some key aspects of our navbar component:

Menu Items: Customize the menu items according to your project requirements. The menuItems variable contains the links and labels for each menu item.
Hamburger Menu: Our navbar includes a hamburger menu icon for smaller devices. This ensures a seamless navigation experience on mobile and tablet devices.
Responsive Design: The navbar is designed to be responsive, adapting to different screen sizes and orientations. You can adjust the padding, colors, and other styles to suit your project's design.

This is the final look of large and small devices
Large device

Small device

Full-Code-Here

Feel free to ask anything.