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"

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:

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".

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

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.