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.





    
    GSAP ScrollTrigger Demo
    
    
    




    Slide 1

    Slide 2

    Slide 3

‍

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