Split Text

Introduction

The Split Text example shows how to create elegant text animations that reveal words one at a time. It uses the splitText function from Motion+ to break apart text into animatable pieces, along with the animate function and stagger helper from Motion to coordinate the animation timing.

The splitText function is a Motion+ utility that splits text content into individual words, characters, or lines, each wrapped in its own element. This makes it easy to animate text in sophisticated ways that would be difficult to achieve with CSS alone. The function handles all the DOM manipulation for you, and it intelligently preserves the original layout and line breaks.

Get started

Let's start with some basic HTML and styles:

<div class="container">
    <h1 class="h1">Level up your animations with the all-in membership</h1>
</div>

<script type="module">
    /** We'll add our animation code here */
</script>

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

We're hiding the container with visibility: hidden initially because we want to reveal the text only after the fonts are loaded and the animation is ready to play. This prevents a flash of unstyled text.

The .split-word class is what splitText will apply to each word element it creates. We add will-change: transform, opacity to optimize the animations.