Join Join
Join

058Line letter spin

In this effect, when the user scrolls, a paragraph is revealed. Each letter then appears inside its own mask with a rotation effect. Shall we take a look? Let’s open it up!

HTML Structure

The section wraps a figure block beside a single paragraph. It still reads as normal copy in the markup — our script will replace its inner structure so each letter can rotate independently:

<section class="mwg_effect058">
    <p class="scroll">Scroll</p>
    <div class="fig">
        <video src="assets/medias/vid.mp4" autoplay loop muted playsinline></video>
        <span class="label">fig 01</span>
    </div>
    <p class="paragraph">Creativity often lives in the space between control and intuition…</p>
</section>

Everything that animates later hangs off that paragraph node. We do not need to mark up individual letters by hand.

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)