Join Join
Join

068Images Flowing

In this effect, a series of images travels across the viewport on scroll, from left to right, following a cylindrical curve. The image at the center stays perfectly straight, while the others continue to warp along the shape. Let’s build it!

HTML Structure

The section opens with a tall wrapper around a viewport-sized column. A small header row sits at the top, then every asset lives inside its own card wrapper — we duplicate the block for each image and caption pair:

<section class="mwg_effect068">
    <div class="pin-height">
        <div class="container">
            <div class="header">
                <p>Travel through my lens</p>
                <p>Let’s collaborate</p>
            </div>
            <div class="media">
                <img src="./assets/medias/1.png" alt="">
                <p>Rabat</p>
            </div>
            <div class="media">
                <img src="./assets/medias/2.png" alt="">
                <p>Mexico City</p>
            </div>
            <!-- duplicate .media for each extra image -->
        </div>
    </div>
</section>

As we scroll, the stage stays pinned while each card lifts in depth, pivots across the view, then steps aside so the next one can take its turn.

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)