Join
Join

060Scroll letter reveal

In this effect, we will reveal a paragraph letter by letter as the user scrolls. Each line will animate its characters with a random stagger, while the content stays pinned on screen. The animation progress is tied to scroll position using scrub. Ready? Let's go!

HTML Structure

The structure is based on a pin-height division that defines how long the scroll-driven section lasts. Inside it, a container holds the layout: a header (title and meta) and a paragraph whose text will be split and revealed. A scroll element acts as a hint before the user starts scrolling.

<section class="mwg_effect060">
    <p class="scroll">Scroll</p>

    <div class="pin-height">
        <div class="container">
            <div class="header">
                <p class="left">About David Hockney</p>
                <div class="right">...</div>
            </div>
            <p class="paragraph">David Hockney (1937) is a British artist...</p>
        </div>
    </div>
</section>

Become a member to unlock
the full effect today.

Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)