Join Join
Join

1103D Flip Cards

In this effect, we will make a series of double-sided cards travel across the screen as the user scrolls. Each card flips to reveal its other face while scaling and pushing forward in depth. Ready? Let’s dive in!

HTML Structure

The structure is a tall pin wrapper and a viewport-sized container. Every card carries two faces: a front image and a back side with another image plus a short text block:

<section class="mwg_effect110">
    <div class="pin-height">
        <div class="container">
            <div class="card">
                <div class="face recto">
                    <img class="media" src="./assets/medias/2.png" alt="">
                </div>
                <div class="face verso">
                    <img class="media" src="./assets/medias/1.png" alt="">
                    <div class="content">
                        <p class="title">TP–7 field recorder</p>
                        <p class="description">Record, edit, trim and layer whatever sound…</p>
                    </div>
                </div>
            </div>
            <div class="card">
                …
            </div>
        </div>
    </div>
</section>

Become a member to unlock
the full effect today.

Join now Join now

Get started with free effects

Get a taste of what’s possible with Made With Gsap, completely free

Try it now Try it now

No credit card or account required.
Free for everyone.