088Drag gallery reveal

In this effect, we drag a horizontal gallery of images. When an item enters the viewport it scales up and slides into place; when it leaves, it hides again. The strip eases smoothly behind the pointer. Let's build it!

HTML Structure

We keep one horizontal track inside the section. Each tile is a .media-parent wrapper around a single image — that way we can hide the bitmap offscreen while keeping a predictable width for hit testing later:

<section class="mwg_effect088">
    <div class="container">
        <div class="media-parent">
            <img class="media" src="./assets/medias/01.png" alt="">
        </div>
        <div class="media-parent">
            <img class="media" src="./assets/medias/02.png" alt="">
        </div>
        <div class="media-parent">
            <img class="media" src="./assets/medias/03.png" alt="">
        </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)