Stacking Cards animation - Sliding from Bottom sections - via GSAP

Stacking Cards animation - Sliding from Bottom sections - via GSAP

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">
    <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="" />
    <link rel="stylesheet" href="gsap.css" />

<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>

<!-- Load Education section libraries -->
<script src=""></script>
<script src=""></script>
<script src=""></script>

<!-- Education section slider: Sliding in 3 sections -->
<script src="gsap.js"></script>    



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

Subscribe to newsletter

Subscribe to receive the latest blog posts to your inbox every week.

By subscribing you agree to with our Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Website pre-launch checklist

69 steps pre-launch checklist is the most complex checklist developed by years of experience in Karpi Studio.

You will find how to test and fix:
- loading speed issues,
- responsivity issues on all current devices,
- SEO issues,
- and many more.

€30 Now: €9.00
Check it now

Suggested articles