Join Join
Join

055Elastic pointer rail

In this effect, a gallery will center itself based on the cursor position. Each item will have its own elasticity as it settles, creating a playful feel. Shall we take a look?

HTML Structure

The DOM stays flat. A container centers a horizontal sentence flex row, and every asset is an img.media sibling — no extra wrappers needed:

<section class="mwg_effect055">
    <div class="container">
        <div class="sentence">
            <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="">
            ...
            <img class="media" src="assets/medias/9.png" alt="">
        </div>
    </div>
</section>

Our script will add modifier classes to each image so GSAP can target groups with different quickTo() timings and elastic bounces.

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)