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.
Get started
The structure has a gallery behind two overlays:
<div class="container">
<ul class="gallery-container"></ul>
<div class="black-overlay"></div>
<div class="pink-overlay"></div>
</div>The pink overlay will have a clip-path that creates a vertical line revealing the content beneath.
