Join Join
Join

125Synced title rail

In this effect, we will slide a row of titles horizontally as the user scrolls. The active title lines up on the left third of the screen, while the matching image and paragraph update below. Ready? Let’s dive in!

HTML Structure

The structure is relatively simple. A tall pin-height wrapper will define how long the scroll sequence lasts, and a container inside it holds the stage:

<section class="mwg_effect125">
    <div class="pin-height">
        <div class="container">
            ...
        </div>
    </div>
</section>

Inside the container, we keep a horizontal track of titles:

<div class="titles">
    <div class="track">
        <h2 class="title">Shape & Form</h2>
        <h2 class="title">Color Theory</h2>
        <h2 class="title">Light Effects</h2>
        ...
    </div>
</div>

Below that, we stack one image per chapter inside medias:

<div class="medias">
    <div class="media"><img src="./assets/medias/1.png" alt="" draggable="false"></div>
    <div class="media"><img src="./assets/medias/2.png" alt="" draggable="false"></div>
    <div class="media"><img src="./assets/medias/3.png" alt="" draggable="false"></div>
    ...
</div>

And next to it, the matching paragraphs live inside copies. Same index, same chapter:

<div class="copies">
    <p class="copy">...</p>
    <p class="copy">...</p>
    <p class="copy">...</p>
    ...
</div>

Become a member to unlock
the full effect today.

Join now Join now

Get started with free effects

Get a taste of what’s possible with Made With Gsap, completely free

Try it now Try it now

No credit card or account required.
Free for everyone.