Split Text: Wavy
Matt Perry
In this tutorial, we're going to build the Split Text: Wavy 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: Wavy 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: Wavy example shows how to create a wavy text animation where individual characters move up and down in a wave pattern. This example uses the splitText function from Motion+ to break text into individual characters, the animate function to create repeating animations, and the stagger function to create a sequential delay that produces the wave effect.
Motion+ is a premium add-on library that extends Motion with advanced features like text splitting. The splitText function automatically splits text into individual characters, words, or lines and wraps them in elements that can be animated independently.
