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! 💻😃
Top comments (0)