Ripple on press

← All motion patterns

Ripple on press

Subscription

A circle blooming from the exact point of contact and fading as it grows.

The wave is sized to twice the host's longest edge and positioned so its centre lands on the pointer, which is what makes the bloom read as originating at the finger rather than at the button. It is spawned on pointerdown rather than click, so the feedback arrives before the action resolves — the whole point of a press ripple. The element takes its colour from currentColor, so it inherits whatever tint the host already has instead of imposing one, and removes itself on animationend so no nodes accumulate.

Ripple on press

This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.

See plans
Ripple on press · CreativePower