Start learning now
Get started

Thank you for your interest and welcome!

We’ve just sent you an email! Check your inbox (and spam folder) and save our email so you don’t miss what’s next!

Meanwhile, rendez-vous here:

024
Opposite 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>

Join Made With Gsap to
unlock the full tutorial

Get access