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:

042
Smooth stacking images

In this effect, we will reveal a series of cards one by one. As soon as one card disappears, the remaining deck moves up towards us. The progression will happen as the user scrolls. Shall we take a look at it? Let’s go!

HTML Structure

The structure is relatively simple here. The container division will remain pinned on the full height of the pin-height division. The images will be children of the medias division.

<div class="pin-height">
    <div class="container">
        <div class="medias">
            <img class="media" src="./assets/medias/1.png" alt="">
            <img class="media" src="./assets/medias/2.png" alt="">
            <img class="media" src="./assets/medias/3.png" alt="">
            ...
        </div>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access