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!