Motion+

Split text

An example of creating a text reveal animation with split text in Motion for React

Time
5 min
Difficulty
Beginner
Access
Motion+
>Live exampleOpen in new tab

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