What the Ripple Effect module does
This module creates a ripple animation that expands from the click position inside the element.
- Creates ripple animation on click
- Automatically positions ripple at click location
- Removes ripple element after animation
- Supports single ripple mode
Files location
HTML / SCSS / JS files live in:
src/components/ui/ripple/
Basic usage
Add the attribute data-anim-ripple
to any clickable element.
Basic ripple button
<button data-anim-ripple>
Button
</button>Single ripple mode
By default, multiple ripples can appear simultaneously.
To allow only one ripple element at a time,
use the value once.
-
data-anim-ripple="once"
Single ripple example
<button data-anim-ripple="once">
Button
</button>How the ripple animation works
- User clicks the element
-
Ripple
<span>element is created - Ripple is positioned at click coordinates
- CSS animation expands the ripple
- Ripple element is removed automatically
Download
Add beautiful interaction feedback to your UI with a simple ripple animation.