material-ripple-effect

A lightweight ripple effect for material deisgn with no dependencies and no CSS

Usage no npm install needed!

<script type="module">
  import materialRippleEffect from 'https://cdn.skypack.dev/material-ripple-effect';
</script>

README

Material Ripple Effect

A JS only / No CSS lightweight utility to create and customize material design ripple effect.


Installation

via npm:

$ npm i material-ripple-effect

via CDN:

<script src="https://unpkg.com/material-ripple-effect@1.0.0/dist/index.js"></script>

API

options

Options for customizing ripples

let defaults = {
  color: "currentColor", // background color of ripple
  class: "", // Class to be added to ripple
  opacity: 0.1, // Opacity of ripple
  centered: false, // If true, then ripple will always originate from center of parent
  spreadingDuration: ".4s", // As its name suggests.
  spreadingDelay: "0s", // As its name suggests.
  spreadingTimingFunction: "linear", // As its name suggests.
  clearingDuration: "1s", // As its name suggests.
  clearingDelay: "0s", // As its name suggests.
  clearingTimingFunction: "ease-in-out", // As its name suggests.
};

RippleStart(e, options) => HTMLElement

Creates a ripple element but does not destroy it (use RippleStop for that). Returns a ripple DOM element.

Parameters

  • e: MouseEvent such as mousedown or TouchEvent such as touchtstart
  • options: Options for customizing ripples
node.addEventListener("mousedown", RippleStart);

RippleStop(ripple)

Destroys the ripple, slowly fading it out.

Parameters

  • ripple: Ripple element from RippleStart
let handleStop = () => RippleStop(ripple);
node.addEventListener("mouseup", handleStop);

RippleBind(node, options) => { destroy() }

Binds event listeners to add and remove ripples when user interacts with the element.

Parameters

  • node: HTML Node to add the event bindings to
  • options: Options for customizing ripples
let rippler = RippleBind(document.querySelector('#ripplebox'));

// To destroy ripples and unbind #ripplebox
rippler.destroy();

Ripple(node, options)

Create a ripple programmatically

Parameters

  • node: HTML Node to ripple
  • options: Options for customizing ripples
// Will cause a single ripple to occur
Ripple(document.querySelector('#ripplebox'))

Thanks To:

License

WTFPL