Motion+

Fill text

An example of creating a text fill loading animation with Motion for React.

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

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.