Split text: Step-by-step tutorial

Matt Perry

In this tutorial, we're going to 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.

Here's a live demo of the example we're going to be creating:

Loading...

Checking Motion+ status…

The Split text tutorial

is exclusive to Motion+

290+ examples & 35+ tutorials

Premium APIs

Visual editor for VS Code

alpha

Discord community

Early access

Lifetime updates

One-time payment, lifetime updates

Already joined?

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

Motion is supported by the best in the industry.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.