White Text Animation: White Typography

"Animated text with motion and timing, built with HTML, CSS, and JS"

I built this animation to see how white text looks when each letter moves independently on a dark background. The letters slide, fade, and settle into place. The timing is what makes it feel alive.

No frameworks. Just HTML, CSS, and JavaScript.

WHAT I WAS TESTING:

How to animate individual letters with staggered timing

How opacity and position changes create a reveal effect

How CSS transitions handle smooth motion without JavaScript animation loops

Each letter starts hidden or displaced. As the animation runs, they move to their final position and fade in. The delay between letters creates a wave effect.

THE TECHNICAL SIDE:

The HTML holds the text in a container. Each letter is wrapped in a span so CSS can target it individually.

CSS handles the animation. Each span gets a transition with a different delay based on its position. The transform property moves the letter, and opacity controls the fade.

JavaScript sets the delays. It reads the text, splits it into characters, wraps each one, and assigns a staggered delay. This way the code works for any text without hardcoding each letter.

WHAT I LEARNED:

Staggered delays are what make text animations feel smooth. Without them, all letters appear at once and it looks like a blink. With them, the eye follows the motion across the screen.

CSS transitions are lighter than JavaScript animation loops. If the effect can be done with transitions, it usually performs better.

The full working example is on CodePen. Change the text and watch the animation update.

Built by Samin Sami | Developer & 3D Experimentation