Welcome to the wonderful world of GSAP (GreenSock Animation Platform)! Today, we're diving into its powerful plugin, ScrollTrigger, to create our very first scroll-triggered animation. No complex math, no headaches. Just pure creative fun.
Let’s get this party started!
What You'll Need
All you need is a basic understanding of HTML, CSS, and JavaScript. If you know how to link a stylesheet and a script, you're more than ready.
Here is what’s we are going to build
Step 1: The HTML Stage
First, let's set the stage. We need some content to scroll through and a special element that we'll bring to life.
Create an index.html file and pop this in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollTrigger Part 1: Reveal Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="section-intro">
<h1>Scroll Down to See the Magic!</h1>
</section>
<section class="section-content">
<div class="reveal-box">
<h2>Tada! 🎉</h2>
</div>
</section>
<section class="section-outro">
<h1>Wasn't that cool?</h1>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Step 2: A Touch of Style (CSS)
Now, let's add some style to make our sections and our special "reveal box" visible. Create a style.css file:
body {
font-family: 'Poppins', sans-serif;
margin: 0;
background-color: #f0f4f8;
}
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.section-intro { background-color: #a7c5eb; }
.section-outro { background-color: #6a85b6; color: white; }
.reveal-box {
width: 250px;
height: 250px;
background-color: #ff6b6b;
color: white;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
Step 3: The GSAP Magic! (JavaScript)
Here’s where the real fun begins. Create your app.js file.
// First, we tell GSAP that we're using the ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);
// Let's set the initial state of our box. We want it to be invisible and slightly down.
gsap.set(".reveal-box", {
opacity: 0,
y: 75
});
// Now, let's create the animation!
gsap.to(".reveal-box", {
opacity: 1,
y: 0,
duration: 1,
ease: "power3.out",
scrollTrigger: {
trigger: ".section-content",
start: "top center",
toggleActions: "play none none reverse",
markers: true,
}
});
Let's Break Down the Magic Object
The scrollTrigger object is our command center. Let's look at what each command does:
trigger: ".section-content": This tells ScrollTrigger, "Hey, keep an eye on the.section-contentelement. It's our cue!"start: "top center": This is the starting line. It means, "Start the animation when the top of our trigger (.section-content) hits the center of the viewport." It's like a tripwire!toggleActions: "play none none reverse": This defines what to do at four key moments:onEnter,onLeave,onEnterBack,onLeaveBack. In our case, it plays the animation on entering the zone and reverses it when leaving.markers: true: This is the secret weapon for learning. It shows visual start and end markers right in your browser. Remove this for your final production code!
You've Built the Foundation!
And just like that, you've done it! You've created a beautiful, professional scroll-triggered animation and learned the fundamental building blocks of ScrollTrigger.
This is a huge first step, but it's only the beginning. Now that you understand how to trigger an animation, you're ready to unlock the features that create truly next-level web experiences.
Ready to become a pro? Let's continue to the next part of our series where we'll learn how to pin elements and link animations directly to the scrollbar!