Split Text
Matt Perry
In this tutorial, we're going to build the Split Text example step-by-step.
This example is rated intermediate 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.
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Split Text tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
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.
