Join Join
Join

024Opposite direction marquees

In this effect, we will infinitely scroll two phrases in opposite directions. As the user scrolls, the first phrase will disappear to reveal the second. Let’s see how to achieve this result!

HTML Structure

The structure is relatively simple here. Each phrase is contained within a container, which will remain pinned while the user scrolls.

<div class="pin-height">
    <div class="container">
        <div class="sentence sentence1">
            <p>Get your ticket now... Get your ticket now...</p>
        </div>
        <div class="sentence sentence2">
            <p>Get your ticket now... Get your ticket now...</p>
        </div>
    </div>
</div>

Become a member to unlock
the full effect today.

Join now Join now

Get started with free effects

Get a taste of what’s possible with Made With Gsap, completely free

Try it now Try it now

No credit card or account required.
Free for everyone.