Fill text
Matt Perry
In this tutorial, we're going to build the Fill 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 Fill 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 Fill text example shows how to create a loading animation where text fills from left to right. This uses useSpring to create smooth progress updates and useTransform to map progress to a clip-path that reveals the text.
The technique stacks two copies of text - a faded background version and a bright version that's progressively revealed.
