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.

Ripple badge

Card with ripple

<button class="btn btn-primary ripple">Ripple button</button>
<button class="btn btn-outline-primary ripple">Outline + ripple</button>
<span class="badge badge-soft-primary ripple demo-badge-pad">Ripple badge</span>
<div class="card card-hover ripple demo-box-w14">
  <div class="card-body">
    <h6 class="card-title mb-0">Card with ripple</h6>
  </div>
</div>

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'));