Motion+

Fill text

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

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 the transform utility to map progress values to clip-path strings, and the animate function with spring physics for smooth transitions.

The technique stacks two copies of text - a faded background version and a bright version that's progressively revealed.