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.