Join Join
Join

066Pinned line mask reveal

What about this effect ? As the user scrolls, the text is revealed line by line through soft horizontal wipes, while the block drifts upward to keep the visible portion centered. Let’s go!

HTML Structure

The section opens with a tiny scroll cue, then a tall spacer wrapping a viewport-sized column. Inside sits a corner figure block and one long paragraph that we will carve into lines:

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

As we scroll, each line wipes in through a horizontal mask while the paragraph nudges upward so the active line stays centred in the container.

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)