Ripple effect

boodoo ships a lightweight Material Design ink-ripple effect. Add the .ripple class (or data-boodoo-ripple) to any element to create a circle that radiates from the point of interaction.

Usage

The ripple is initialized automatically for any element with the .ripple class or data-boodoo-ripple attribute. It works on click/tap (pointer events) and Enter/Space for keyboard, and respects prefers-reduced-motion.

How it works

<button class="btn btn-primary ripple">Ripple button</button>

<!-- or via data attribute -->
<div class="card ripple" data-boodoo-ripple>...</div>

The ripple is a span.ripple-effect appended inside the element, expanding from the pointer position. The CSS animation is defined in scss/components/_ripple.scss, and the logic in js/src/ripple.js.

Programmatic

import { initRipple } from 'boodoo/dist/js/boodoo.esm.js';
// Re-scan for newly added ripple surfaces
initRipple(document.getElementById('dynamicRegion'));