Join Join
Join

073Scroll-Based Timeline Animation

In this timeline effect, large dates animate progressively as you scroll, guiding the motion and drawing attention to key moments along the way. Let's see how we wire it!

HTML Structure

The section stacks a tall wrapper around one extra-wide row. Each chapter is a full-width slice with a two-column interior and a big year label — we duplicate the block for every milestone the rail should visit:

<section class="mwg_effect073">
    <div class="pin-height">
        <div class="container">
            <div class="section">
                <div class="left">
                    <p class="main-title">…</p>
                    <p class="label">…</p>
                </div>
                <div class="right">
                    <p class="label">…</p>
                    <p class="content">…</p>
                </div>
                <p class="title">1989</p>
            </div>
            <div class="section">
                <div class="left"></div>
                <div class="right">…</div>
                <p class="title">1993</p>
            </div>
            <!-- duplicate .section for each extra chapter -->
        </div>
    </div>
</section>

As we scroll, the strip drifts horizontally while each year locks to a different edge of its section — entering from one side and leaving through the other.

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)