Welcome to our tutorial on how to create a scroll-triggered slide animation using GSAP and ScrollTrigger. This guide will walk you through setting up a basic HTML structure, styling your slides with CSS, and finally, creating smooth, engaging animations with GSAP. By the end of this tutorial, you'll have a fully functional scroll-triggered animation that you can customize for your projects.
Step 1: Setting Up Your HTML Structure
Start by defining the HTML structure. We'll create a container that holds three slides, each identified by a unique class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GSAP ScrollTrigger Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="gsap.css" />
</head>
<body>
<div class="gsap-edu-swiper-container">
<div class="gsap-edu-swiper-slide slide-1"><h2>Slide 1</h2></div>
<div class="gsap-edu-swiper-slide slide-2"><h2>Slide 2</h2></div>
<div class="gsap-edu-swiper-slide slide-3"><h2>Slide 3</h2></div>
</div>
<!-- Load Education section libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
<!-- Education section slider: Sliding in 3 sections -->
<script src="gsap.js"></script>
</body>
</html>
CSS
body {
background: black;
margin: 0;
padding: 0;
color: rgb(236, 38, 38);
font-family: Arial, Helvetica, sans-serif;
}
.gsap-edu-swiper-container {
height: 100vh;
width: 100%;
margin: auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.gsap-edu-swiper-slide {
position: absolute;
width: 100%;
height: 100vh;
background: whitesmoke;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5rem;
margin-bottom: 3rem;
}
.gsap-edu-swiper-slide.slide-1 {
left: 0px;
top: 0px;
}
.gsap-edu-swiper-slide.slide-2 {
left: 0px;
top: 35px;
}
.gsap-edu-swiper-slide.slide-3 {
left: 0px;
top: 70px;
}
In this article we recreate the animation stacking cards
Original video: Overlapping Cards Animation With GSAP ScrollTrigger
