Start learning now
Get started

Thank you for your interest and welcome!

We’ve just sent you an email! Check your inbox (and spam folder) and save our email so you don’t miss what’s next!

Meanwhile, rendez-vous here:

001
Card stack

For this effect, I tried to replicate the movement of a stack of cards spreading and sliding across a surface. How does it work? We’ll pin a division during a scrolling distance and move its child horizontally at the same time. Let’s begin!

HTML Structure

The HTML structure of the effect remains relatively simple. I declared a container as the parent of the section that will hold all my cards.

<div class="container">             
    <div class="cards">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access