Typewriter
Matt Perry
In this tutorial, we're going to build the Typewriter example step-by-step.
This example is rated intermediate difficulty, which means we'll spend some time explaining the Motion APIs we've chosen to use, but it assumes familiarity with JavaScript as a language.
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Typewriter tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
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.
