Join Join
Join

069Inchworm Scroll Effect

In this effect, a series of images moves across the viewport from right to left on scroll, following an inchworm-like motion. Let’s dive in!

HTML Structure

The section wraps a tall runway around one full-height row. Each photograph is a direct child image tagged with the same class — we duplicate the tag for as many assets as we need:

<section class="mwg_effect069">
    <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 image crosses the frame on a loose inchworm path — high and low hops with a little tilt, then a clean exit.

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)