HTML content: Step-by-step tutorial

Introduction

The HTML Content example shows how to animate numerical content in React without animating React state. This is much better for performance.

The magic is in the motion component's ability to render motion values. This bypasses React's diffing algorithm, and assigns the value of the motion value to the DOM node directly.

Get started

Let's start with a basic component structure:

export default function HTMLContent() {
    return <pre style={{ fontSize: 64, color: "#61afef" }}>0</pre>
}

Let's animate!

Import from Motion

First, we'll import the necessary hooks and functions from Motion:

import { animate, motion, useMotionValue, useTransform } from "motion/react"

Creating the animation

1. Create a motion value to track our counter:

const count = useMotionValue(0)

2. Use useTransform to round the number as it animates:

const rounded = useTransform(() => Math.round(count.get()))

3. Start the animation when the component mounts using Motion's animate function:

useEffect(() => {
    const controls = animate(count, 100, { duration: 5 })
    return () => controls.stop()
}, [])

4. Display the animated value using a motion.pre component:

return <motion.pre style={text}>{rounded}</motion.pre>

Conclusion

In this tutorial, we learned how to:

• Create an animated counter using useMotionValue

• Transform motion values into new values with useTransform

• Start and clean up animations with useEffect

• Display animated numerical content in a React component