Typewriter

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.

Get started

Let's start with the basic HTML structure and styles:

<div class="container">
    <h2 class="title">
        <span class="text" id="text"></span>
        <div class="cursor"></div>
    </h2>
</div>

<script type="module">
    const text = "Hello world!"
    const textElement = document.getElementById("text")
    const cursor = document.querySelector(".cursor")
</script>

<style>
    /** Copy styles from example source code */
</style>

We have a text span that starts empty and a cursor element positioned absolutely to the right of the text. The cursor uses will-change: opacity since we'll be animating its opacity continuously.