Join Join
Join

081Letter-by-Letter Swap

In this effect, text changes on scroll through an in-place transition, where each paragraph is replaced letter by letter — fading out the current one while revealing the next.

HTML Structure

The structure holds a tall wrapper for scrub length, a viewport-sized container, and every paragraph we want to crossfade. An empty .all-paragraphs container waits at the end — we'll inject one flex row per logical line into it via JavaScript:

<section class="mwg_effect081">
    <div class="pin-height">
        <div class="container">
            <div class="top">
                <p>About tokyo</p>
                <img class="media" src="./assets/medias/1.png" alt="">
            </div>
            <p class="paragraph">First paragraph of body copy.</p>
            <p class="paragraph">Second paragraph of body copy.</p>
            <p class="paragraph">Third paragraph of body copy.</p>
            <div class="all-paragraphs" aria-hidden="true"></div>
        </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)