Join Join
Join

087Staggered Card Motion

In this effect, cards travel across the viewport on scroll with a subtle latency effect, making the motion feel smooth and dynamic. The spacing between each card progressively tightens as you scroll. Let's build it!

HTML Structure

We keep the markup simple. A centred .container will be pinned, and a single flex row holds every card. Each card wraps its quote and portrait inside .card-content so the outer shell stays still while the inner layer handles the entrance motion:

<section class="mwg_effect087">
    <div class="container">
        <div class="cards">
            <div class="card">
                <div class="card-content">
                    <p class="top">Quote text goes here.</p>
                    <div class="bottom">
                        <img src="./assets/medias/1.png" alt="">
                        <p>Name and role</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <p class="top">Another quote.</p>
                    <div class="bottom">
                        <img src="./assets/medias/2.png" alt="">
                        <p>Name and role</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now Try it now

(No registration or credit card needed)