Motion+

Typewriter

An example of a typewriter effect using Motion for JavaScript animation values.

Time
5 min
Difficulty
Beginner
Access
Motion+
>Live exampleOpen in new tab

Introduction

The Typewriter example shows how to create a classic typewriter effect where text appears character by character, complete with a blinking cursor. This example uses the animate function from Motion to animate both the text reveal and cursor blink. The animate function can animate not just DOM elements, but also raw number values, which is perfect for this typewriter effect.

By animating a number from 0 to the length of our text string, we can use the onUpdate callback to update the displayed text on each frame. This approach gives us complete control over the typing animation without needing to manually manage intervals or timeouts.