Join Join
Join

070Inchworm Scroll Effect

In this effect, images flow from right to left on scroll in a continuous inchworm-like motion, creating a soft, organic transition. Let’s get started!

HTML Structure

The section stacks a tall wrapper around one full-height row. Every card is a direct child of that row, sharing one class — we repeat the tag for each asset we want in the parade:

<section class="mwg_effect070">
    <div class="pin-height">
        <div class="container">
            <img class="media" src="./assets/medias/1.png" alt="">
            <img class="media" src="./assets/medias/2.png" alt="">
            <img class="media" src="./assets/medias/3.png" alt="">
            <!-- duplicate img.media for each extra image -->
        </div>
    </div>
</section>

As we scroll, the row stays pinned while each card advances in measured horizontal beats — like an inchworm stepping through lanes before it exits.

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)