Join Join
Join

075Pinned scroll fan

A pinned ring of rounded cards waits offstage. As we scroll, each card pops into the spread one by one — the deck fans open while the others step aside. Let's see how we stage it!

HTML Structure

The section wraps a tall runway around one viewport-sized column. A short headline sits above the deck, then a wide circular field holds every card wrapper — each one carries an image and a small caption pair:

<section class="mwg_effect075">
    <div class="pin-height">
        <div class="container">
            <p class="header">
                <span>Rounded cards</span>
                <span>animating on scroll</span>
            </p>
            <div class="circles">
                <div class="circle">
                    <div class="media">
                        <img src="./assets/medias/1.png" alt="">
                        <div class="content">
                            <p>Tokyo</p>
                            <span>Japan</span>
                        </div>
                    </div>
                </div>
                <!-- duplicate .circle for each extra card -->
            </div>
        </div>
    </div>
</section>

On scroll, cards pop into an éventail one step at a time — each arrival elastic, the ring rotating to make room for the next.

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)