Split Text: Scatter
Matt Perry
In this tutorial, we're going to build the Split Text: Scatter 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: Scatter 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: Scatter example shows how to create a dynamic text animation where individual characters scatter away from the pointer based on its movement speed and direction. This uses three Motion APIs: the splitText function from Motion+ to break text into individual characters, the hover function to detect when the pointer moves over each character, and the animate function to create smooth spring animations.
The splitText function automatically splits text into characters or words, making it easy to animate each piece independently. Combined with Motion's gesture detection and animation functions, we can create sophisticated interactive effects with minimal code.
