Material Ripple Effect In Vanilla JavaScript – Ripplet.js

Preview:

Description:

Ripplet.js is a lightweight vanilla JavaScript library which applies Material Design inspired ripple effects to any element using  CSS properties. Written in Typescript.

Features:

• Highly customizable.
• Lightweight. Less than 3kb.
• Configurable animation.
• Custom trigger elements.

Basic usage:

Install it via NPM or include the compiled JavaScript in the document directly.

# NPM
$ npm ripplet.js --save
import ripplet from 'ripplet.js';

<!-- OR -->
<script src="ripplet-declarative.min.js"></script>

Setup with inline markup.

<button data-ripplet>Default</button>
<button data-ripplet="color: rgba( 64, 192, 255, .2); spreading-duration: 2s; clearing-delay: 1.8s;">Sky Blue Slow</button>

Setup with JavaScript.

• targetSuchAsMouseEvent: { currentTarget: Element, clientX: number, clientY: number }
• options: an array of options as introduced below

ripplet(targetSuchAsMouseEvent, options)

All possible options with default values.

{
  className:                '',
  color:                    'rgba(0, 0, 0, .1)',
  opacity:                  null,
  spreadingDuration:        '.4s',
  spreadingDelay:           '0s',
  spreadingTimingFunction:  'linear',
  clearing:                 true,
  clearingDuration:         '1s',
  clearingDelay:            '0s',
  clearingTimingFunction:   'ease-in-out',
  centered:                 false,
  appendTo:                 'body'
}

Changelog:

v1.1.0 (05/17/2021)

• add appendTo: auto option: find the closest appendable element

v0.5.4 (04/13/2021)

• fixed build

v0.5.2 (03/28/2021)

• fix: misaligned when zoom is set on Safari.

v0.5.0 (03/16/2021)

• fix: ripple effects were not displayed under some conditions

v0.4.1 (03/13/2021)

• feat: allow css variables like `var(–primary-color)` to be specified for css-like options

v0.3.0 (08/08/2020)

• make ripplet remains until pointerup or pointerleave event occurs

v0.2.1 (07/04/2020)

• Supports RTL

v0.2.0 (05/30/2020)

• Support `currentColor` for the color option and change default options (color: currentColor, opacity: 0.1).

v0.1.13 (06/24/2018)

• fix ripplet coordinate appending to the parent that is a flexbox