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:

018
Card movement

In this effect, we will make a series of cards appear from bottom to top. The cards will linger in the center of the screen before moving out with a slight bounce. The staggered appearance of each card creates a wave effect that I really love! Let’s roll up our sleeves and get started!

HTML Structure

Here, the structure is relatively simple: we will pin the container division to the height of the pin-height division while the cards move.

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

Join Made With Gsap to
unlock the full tutorial

Get access