How To: On Scroll Letter Animations

By James LePage
 on March 17, 2021
Last modified on January 7th, 2022

How To: On Scroll Letter Animations

By James LePage
 on March 17, 2021
Last modified on January 7th, 2022

I was recently enthralled by this Codrops article, showing really unique on scroll letter animations. Unfortunately, there were no directions attached to the examples. This article will serve as the companion "how to" to that demo.

We've recently begun implementing Locomotive Scroll into many of our projects, which is a JS library that helps you apply smooth scrolling, parallax, and motion effects to your website, and elements within. We'll be using that for "inertia" based on scroll letter animations. Here's a video example of the effect from that Codrops article.

We can see that each letter "moves" as the user scrolls up and down on the page. What makes this unique, and is the reason why we're using Locomotive Scroll is the inertia effect here. It's tough to explain, and much easier to view in the live demo, but after you stop scrolling, the page keeps moving in the same direction for a few pixels, like there's weight behind it.

So, how exactly do we make this effect? Let's break it down, then show you how exactly we can recreate it.

You can see that each letter moves at a different rate, but all are faster than the actual scrolling of the page. This is known as parallax. The effect of the parallax is offset for each letter, in a way that results in the first letters moving earlier than the last. It's like the end of the line is heavier than the beginning. And that's essentially it. Now let's make it.

Everything here can be done with Locomotive Scroll. First, we need to add the library to our site and initialize it. If you need directions on how to do that, read this tutorial that we published. By default, this will add the smooth, inertia-like scrolling effect to your website.

Once installed and initialized, we now need to add the effect to the actual text. This is a bit time intensive, so it only really makes sense on larger headings. Sadly, there's no way to automate this part (that we've found, though it would make for a great standalone JS library!).

The first step is wrapping the text that you want to apply this effect to with a div. Then, add the following attribute to that div: "data-scroll"

Wrap the text in a div. Add the attribute to the div.

Because each letter moves at a different rate, they must be isolated, and the parallax effect must be applied to each individual one. We do this by wrapping each individual letter in a span element. You can see that visually here:

Each letter has a span around it.

Once each letter is wrapped in a span, we apply parallax to each of them. With Locomotive Scroll, we need to add three individual attributes. "data-scroll", "data-scroll-delay" and "data-scroll-speed".

Attributes applied in Oxygen Builder.

Here's how the HTML looks for an individual letter:

Note the attributes here. CSS styles are added by LS, dynamically changing as the user scrolls.

Each letter within a line, the data-scroll-delay should increase by 0.01. The first letter's delay must be 0.05. So, the third letter within a line would be 0.08. The speed remains the same for all letters (changing it minimizes or exaggerates the effect).

When starting a new line, the data-scroll-delay reverts to 0.05 for the first letter, increasing by 0.01 for each additional one. This delay pattern is for a left-to-right effect. If you want the center to be "pulled/pushed" first, than set the delay for the center letter to be 0.05, and work out (this would give you the effect in the video demo above).

You should probably set the white space to nowrap so the lines don't break. Responsiveness is an issue here, and you need to keep the lines the same, regardless of screen size with this effect. In our case, we only have it enabled on desktops, and disable on mobile browsers.

And that's how you make a unique on scroll letter animation for your website, using Locomotive Scroll! You could probably use other Parallax libraries to do this, but you won't have that inertia effect, which is what makes this so unique.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Alejandro Aruca
Alejandro Aruca
1 year ago

Excellent James, please make a tutorial to Barba JS in Oxygen.

11 months ago

Hi This is a nice alternative for manipulating the letters.

Andre Dotti
Andre Dotti
8 months ago

I love this. How about the pictures. Where there on scroll too?

Article By
James LePage
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Your Cart is Empty