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

OnScrollLetterAnimations

From our sponsor: Elevate all your marketing with Mailchimp Smarts.

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn’t matter if you are a beginner or intermediate, start learning CSS now.