Split text example: Step-by-step

In this tutorial, we'll build the Split text example step-by-step.

This example is rated 2/5 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.

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.

Let's animate!

Import from Motion

First, let's import what we need from Motion:

import { animate, stagger } from "motion"
import { splitText } from "motion-plus"

Await font loading

To ensure our text animations start only after fonts are properly loaded (which prevents layout shifts), we'll use the document.fonts.ready promise:

useEffect(() => {
    document.fonts.ready.then(() => {
        if (!containerRef.current) return
 
        // Make the container visible once fonts are loaded
        containerRef.current.style.visibility = "visible"
 
        // Animation code will go here
    })
}, [])

Using splitText

Now, let's use the splitText utility to break our heading into individual words:

const { words } = splitText(containerRef.current.querySelector("h1"))

The splitText function finds the text within our h1 element and returns an object containing arrays of the split elements organised into chars, words and lines. In this case, we're only interested in the words array, which contains references to each word that's been split.

Behind the scenes, splitText has wrapped each word in a <span> with the class "split-word", which we can target with our CSS and animate function.

Creating the staggered animation

Now we can animate the individual words with a staggered effect:

animate(
    words,
    { opacity: [0, 1], y: [10, 0] },
    {
        type: "spring",
        duration: 2,
        bounce: 0,
        delay: stagger(0.05),
    }
)

Here's what's happening:

• We're targeting all elements in the words array
• Each word will animate from invisible (opacity: 0) to visible (opacity: 1)
• Each word will also animate from slightly below its final position (y: 10) to its proper place (y: 0)
• We're using a spring animation with no bounce for a smooth effect
• The stagger(0.05) function creates a 0.05 second delay between each word's animation, creating a sequential reveal

The will-change: transform, opacity in our CSS helps browsers optimize the animation performance.

Conclusion

We've learned how to create an elegant text reveal animation by:

1. Using splitText to break text into individual words
2. Waiting for fonts to load completely before starting animations
3. Applying staggered animations to create a sequential reveal effect

This technique is perfect for hero sections, taglines, or any text element you want to highlight with a smooth entrance animation. You can customize the effect further by adjusting the animation properties or splitting by characters instead of words.