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:

046
Letter by letter

In this effect, we will see how to make a sentence appear letter by letter in a random order as the user scrolls, while keeping the content pinned. This type of effect can be useful for grabbing the visitor's attention on a phrase or concept. Let’s roll up our sleeves and get started!

HTML Structure

The structure is very simple here: we will pin the container div to the entire height of the pin-height div as the user scrolls. The text will be inside a p tag. Each letter will be dynamically wrapped in a span using JavaScript, so we don’t have to do it manually.

<div class="pin-height">
    <div class="container">
        <p class="sentence">Our chairs are way more than furniture.</p>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access