HTML content

Matt Perry

In this tutorial, we're going to build the HTML content 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:

Introduction

The HTML content example shows how to animate any HTML content, not just CSS properties. It uses the animate function from Motion with the onUpdate callback to create a counting animation that updates the text content of an element.

This is particularly useful for animating numbers, dynamic text, or any DOM property that isn't a CSS value. Motion handles the smooth interpolation between values, and you control what happens with those values on each frame.

Get started

Let's start with a simple <pre> element that will display our animated number:

<pre id="count">0</pre>

<script type="module"></script>

<style>
    #count {
        font-size: 64px;
        color: #8df0cc;
    }
</style>

We're using a <pre> tag to display the number with monospaced formatting, so when digits change, the width of the character stays the same.

Let's animate!

Import from Motion

First, import the animate function from Motion:

<script type="module">
    import { animate } from "motion"
</script>

Get a reference to the element

Before we can animate, we need to get a reference to our count element:

<script type="module">
    import { animate } from "motion"

    const count = document.getElementById("count")
</script>

Animate the number

Now we can use animate to smoothly count from 0 to 100. The key is the onUpdate callback, which fires on every frame of the animation:

<script type="module">
    import { animate } from "motion"

    const count = document.getElementById("count")

    animate(0, 100, {
        duration: 2,
        ease: "circOut",
        onUpdate: (latest) => (count.innerHTML = Math.round(latest)),
    })
</script>

The animate function takes three arguments: a start value (0), an end value (100), and an options object. We're using a 2 second duration and the "circOut" easing for a smooth deceleration effect.

The onUpdate callback receives the current interpolated value on each frame. We round it to the nearest integer with Math.round() and update the element's innerHTML to display the current count.

This pattern works for any DOM property you want to animate. You can update any text content or even data- attributes.

Motion makes it easy to animate any value over time, and the onUpdate callback gives you complete control over what happens with those values. This is especially powerful when you need to animate things that CSS transitions can't handle, like numbers in text or complex state updates.

Conclusion

We've built a number counter that smoothly animates from 0 to 100 using Motion's animate function. By leveraging the onUpdate callback, we can update any DOM property or JavaScript value with Motion's smooth interpolation, opening up possibilities far beyond CSS animations.