Scrolling Letters Animation

A switching title effect where a fixed text element changes with an animation depending on the scroll position.
ScrollingLettersAnimation_Featured

Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome effect to recreate and play with different animations for the text as it changes. For detecting when a certain section is entered, we use the Intersection Observer API. Note that the API is currently not supported in Safari.

The animations are powered by anime anime.js. We also use imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.

The demo is kindly sponsored by monday.com: The visual project management tool built for designers.
If you would like to sponsor one of our demos, find out more here.

Attention: Highly experimental demo with modern CSS properties in use. The Intersection Observer API is currently not supported in Safari.

For the demos, we’ve created a layout that starts with some intro text and another text element that will scroll along. Once that element reaches the next section, it will switch to a new title.

In the first demo shuffles the letters in a sequencial way and the second one shows some random characters.

ScrollingLettersAnimation_01

ScrollingLettersAnimation_02

ScrollingLettersAnimation_03

ScrollingLettersAnimation_04

We hope you enjoy the demos and find them inspirational.

References and Credits

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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.

Feedback 3

Follow this discussion

Leave a Comment