How To: On Scroll Letter Animations

Published: 7 months ago

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.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alejandro Aruca
Alejandro Aruca
5 months ago

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

Robert
Robert
4 months ago

Hi This is a nice alternative for manipulating the letters. https://github.com/davatron5000/Lettering.js

Andre Dotti
Andre Dotti
1 month ago

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

IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram