Split text

Introduction

In this tutorial, we'll explore how to create a staggered text animation using the splitText utility from Motion+. This technique breaks text into individual words or characters that can be animated independently, creating elegant text reveal effects.

We'll learn how to use:

• splitText to separate text into animatable elements
• animate to control the animation of those elements
• stagger to create sequential timing effects

Get started

Let's start by setting up our basic component structure:

import { useEffect, useRef } from "react"

export default function SplitText() {
    const containerRef = useRef(null)

    return (
        <div className="container" ref={containerRef}>
            <h1 className="h1">
                Level up your animations with the all-in membership
            </h1>
            <Stylesheet />
        </div>
    )
}

/**
 * Copy styles from example source code
 */

Note that we're setting visibility: hidden on the container. This prevents the text from showing until fonts are downloaded and we're ready to animate it.