Material Ripple Effect In Vanilla JavaScript – Ripplet.js

Category: Animation , Javascript | May 17, 2021
Author:luncheon
Views Total:578 views
Official Page:Go to website
Last Update:May 17, 2021
License:MIT

Preview:

Material Ripple Effect In Vanilla JavaScript – Ripplet.js

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

You Might Be Interested In:


Leave a Reply