Motion+

Loading overlay

An example of creating a line reveal loading animation with clipPath in Motion

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

Introduction

The Line reveal example creates a dramatic loading animation where a thin vertical line extends from the center of the screen, then expands horizontally to reveal content beneath.

This example uses the animate function and transform utility to create a complex clip-path animation that responds to loading progress.