Clip wipe.
A mask reveals content from one edge.
See the movement
One intentional triggerPlayback starts only when you request it. Stop returns to the still illustration.
What it does
A clipping boundary moves across the component while the content itself stays still. This makes the reveal feel like uncovering a surface, rather than sliding the surface into place.
Timing curve
cubic-bezier(.4,0,.2,1)Default duration650ms
RepetitionOnce per trigger
Make the motion useful
Choose an effect that supports the component’s purpose. Keep the final state clear, preserve focus and reading order, and pair important feedback with a visible message.
CSS animation reference