Join Join
Join

053Pinned 3D line swap

Here we're going to stack a few quotes in the same grid cell. A scrubbed timeline will spin the outgoing lines on the Y-axis while the next paragraph folds in — staggered. Shall we wire it up? Let’s go!

HTML Structure

The structure is simple. A tall pin-height wrapper defines how long the scroll-driven sequence lasts. Inside it, a container holds several quote paragraphs and a small credit block at the bottom:

<section class="mwg_effect053">
    <div class="pin-height">
        <div class="container">
            <p class="paragraphs">All that matters is that you are making something you love.</p>
            <p class="paragraphs">Failure is the information you need to get where you’re going.</p>
            <p class="paragraphs">Do what you can with what you have. Nothing more is needed.</p>

            <div class="bottom">
                <img src="assets/medias/1.png" alt="">
                <p>
                    <span>Rick Rubin</span> <br />
                    The Creative Act: A Way of Being
                </p>
            </div>
        </div>
    </div>
</section>

Each paragraph uses the class paragraphs. We stack them in the same visual slot with CSS later, so they occupy the same grid cell and crossfade on top of each other. The individual lines do not exist in the source HTML yet — SplitText will inject them when we initialise the effect.

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)