On-Scroll Letter Animations

A small set of examples showing how letters can be animated on scroll.

From our sponsor: Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.

Today I’d like to share some on-scroll animations for typography with you. There’s a lot of artsy stuff that can be done when we scroll a page and moving letters is one of the things that can set an interesting “motion mood” to a design. Be it just a simple title or a menu or a card-like component, we can play with moving letters depending on the scroll (direction and speed).

This set is very experimental using Locomotive Scroll, and there are certainly better ways to calculate the translate value of each letter, depending on the length of the words, for example. I’ve made this quick and dirty but I hope it gives you some idea of what can be done.

In combination with images, we can add another layer of visual motion which makes possibilities really endless.

I hope you enjoy this little set and find it useful! Thank you for checking by and hit me up on Twitter @crnacura or @codrops, I’d love to hear your feedback!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.