Fully controllable vanilla-js material design ripple effect generator.

Overview

ripplet.js

BundlePhobia Types: included License: WTFPL

Fully controllable vanilla-js material design ripple effect generator.
This can be used with any JavaScript framework and/or any CSS framework.

Demo

Installation

npm

$ npm i ripplet.js
import ripplet from 'ripplet.js';

element.addEventListener('pointerdown', ripplet);

CDN (jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<button onpointerdown="ripplet(arguments[0])">Click me!</button>

Download directly

Download ripplet.min.js

API

ripplet(targetSuchAsPointerEvent, options?) => HTMLElement

Generate a ripple effect.

Parameters

  • targetSuchAsPointerEvent: Object (required) (in most cases, pass the received PointerEvent object)
Property name Description
currentTarget Target element
clientX Client x-coordinate of center of ripplet
clientY Client y-coordinate of center of ripplet
  • options: Object (optional)
Property name Default Description
className "" Class name to be set for the ripplet element (not for this library to use, but for user to style that element)
color "currentColor" Ripplet color that can be interpreted by browsers. Specify null if the color or image of the ripple effect is based on the CSS className above.
If the special value "currentColor" is specified, the text color of the target element (getComputedStyle(currentTarget).color) is used.
opacity 0.1 Ripplet opacity between 0 and 1.
spreadingDuration ".4s" As its name suggests.
spreadingDelay "0s" As its name suggests.
spreadingTimingFunction "linear" As its name suggests. See https://developer.mozilla.org/docs/Web/CSS/transition-timing-function
clearing true Whether or not to clear automatically. If false is specified, the ripple effect should be cleared using ripplet.clear(currentTarget)
clearingDuration "1s" As its name suggests.
clearingDelay "0s" As its name suggests.
clearingTimingFunction "ease-in-out" As its name suggests. See https://developer.mozilla.org/docs/Web/CSS/transition-timing-function
centered false Whether to force the origin centered (and ignore clientX and clientY).
appendTo "auto" "auto" | "target" | "parent" | CSS selector string like "body". Specify the element to which the ripple effect element will be appended. If "auto" is specified, it will be the target or its closest ancestor that is not an instance of HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLImageElement, HTMLHRElement or SVGElement.

Return value

Generated element.

ripplet.clear(currentTarget?, generatedElement?) => void

Fade out and remove the ripplet. Use only when the option clearing is false.

Parameters

  • currentTarget: Element (optional)

The target element that was passed to ripplet(). If this parameter is not passed, all the ripplets will be cleared.

  • generatedElement: Element (optional)

The generated element that was returned by ripplet(). If this parameter is not passed, all the ripplets (of the currentTarget above) will be cleared.

Example

<button
  onpointerdown="ripplet(arguments[0], { clearing: false })"
  onpointerup="ripplet.clear(this)"
  onpointerleave="ripplet.clear(this)"
>Keep pressing!</button>

ripplet.defaultOptions

You can change the default ripplet options for your app.
For example:

import ripplet from 'ripplet';

ripplet.defaultOptions.color = 'rgb(64, 128, 255)';

Declarative Edition

If you don't need detailed control, you can use declarative edition that captures pointerdown events.
Load "ripplet-declarative.js" and add data-ripplet attribute to html elements with/without options.
Elements dynamically appended also have the ripple effect if data-ripplet attribute is available.

In declarative edition, the ripple effect remains until the pointerup or pointerleave event occurs.

Example Usage

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/ripplet-declarative.min.js"></script>
<!-- <script>ripplet.defaultOptions.color = 'rgb(0, 255, 0)';</script> -->

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

or

import 'ripplet.js/es/ripplet-declarative';
// require(ripplet.js/umd/ripplet-declarative.min');

// import { defaultOptions } from 'ripplet.js/es/ripplet-declarative';
// defaultOptions.color = 'rgb(255, 128, 0)';

or

Download ripplet-declarative.min.js

Tips

I recommend applying following styles to the ripple target elements:

  1. Erase tap highlight effect for mobile devices
  2. Disable tap-to-hover behavior and double-tap-to-zoom behavior for mobile devices
/* Example for the declarative edition */
[data-ripplet] {
  -webkit-tap-highlight-color: transparent; /* 1 */
  touch-action: manipulation; /* 2 */
}

License

WTFPL

Comments
  • Do not despawn ripple element until mouseup is triggered

    Do not despawn ripple element until mouseup is triggered

    As per the material design guidelines, the ripple effect should not be removed until the mouse is lifted.

    Example: https://vuetifyjs.com/en/directives/ripples/#ripple-directive

    opened by TheComputerM 7
  • Various ripple effects

    Various ripple effects

    Hi, first of all, awesome work you did ! Far better than every other ripple library.

    I am working on my Bootstrap buttons : https://djibe.github.io/material/docs/4.4/material/buttons/

    • I want a dark ripple on every button.
    • I want a light ripple on btn-primary, btn-secondary, btn-info, etc ...
    • I want a customized colored ripple on each btn-outlined-* and btn-flat-*

    How can I declare these in Javascript ?

    I started with

    ripplet.defaultOptions.color = 'rgba(0, 0, 0, 0.12)';
    
    let buttonsRippleArr = document.querySelectorAll('.btn:not([disabled])');
    
    buttonsRippleArr.forEach(function(elem) {
      elem.addEventListener('mousedown', ripplet);
    });
    

    But I don't know how to create custom declarations for various components.

    Thanks for your help and impressive work.

    opened by djibe 5
  • transform animation not playing on chrome in react

    transform animation not playing on chrome in react

    Not sure how I am misusing this library, but everything looks and behaves correctly on Firefox. When using on chrome, however, the transform animation will not play. The opacity animation seems to play fine. What is odd is that the demo site plays fine on chrome. I assume the demo site is running the same 0.3.0 version.

    opened by ryansheehan 3
  • RTL support

    RTL support

    When using ripplet in RTL container, the ripple X position is off. This can be fixed with adding a 'direction' option:

    export const defaultOptions = {
      ...
      direction: 'ltr' as string | null, // ltr as default
    }
    

    and then changing line 117 to:

    /^rtl$/i.test(options.direction!) ? rippletStyle.marginRight = `${targetRect.right - clientX - radius}px` : rippletStyle.marginLeft = `${clientX - targetRect.left - radius}px`
    
    opened by 726b 3
  • Ripple doesn't work on bootstrap modal

    Ripple doesn't work on bootstrap modal

    Hi,

    Whenever I put a ripple inside of a bootstrap modal, it does not display on the button. This is maybe because on bootstrap model, it has z-index of 240 so the ripple could maybe be just below the modal or something.

    Also, I love this library, thanks for making it!

    opened by r0hin 2
  • Sometimes the ripple just flickers instead of 'ripples'?

    Sometimes the ripple just flickers instead of 'ripples'?

    Sometimes in my tests on Angular apps, when clicking on an element that has implemented ripplet.js it will just flicker instead of have the ripple effect, as though it recognizes the click but it skips the ripple animation. Do you have any ideas about how I might fix this?

    opened by EvanSevy 1
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
A JavaScript library for adding ripple effects to HTML elements based on mouse events.

About project Ripplejs is an open source javascript library created for the purpose of adding ripple effects to html elements based on mouse events. L

Udezue Oluomachi Chimaobi 7 May 10, 2022
Prisma 2+ generator to emit fully implemented tRPC routers

Prisma tRPC Generator Automatically generate fully implemented tRPC routers from your Prisma Schema. This includes routers, app router and of course a

Omar Dulaimi 370 Jan 3, 2023
Material Design implemented in Web Components (Custom Elements v1)

Material Web Components Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/ Ge

Danny Moerkerke 110 Nov 14, 2022
Design-focused web3 modal based on Material UI

@buildship/web3-login (beta) This is a design-focused web3 wallet connecting modal for React based on Material UI. It supports Metamask, WalletConnect

Buildship 25 Jan 1, 2023
🖼️ Bringing Material Design 3 to the Astro Blog. [WIP]

??️ Gumori You [WIP] Bringing Material Design 3 to the Astro Blog. ?? Contributing If you're interested in contributing to Gumori You, pls read the fo

!mportantImport 4 Oct 16, 2022
Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap 5 UI KIT - 700+ components, plain JavaScript, MIT license, simple installation. MDB is a collection of free Bootstrap templates, themes, des

MDBootstrap 22.9k Dec 30, 2022
Efeito de ripples baseado no Material Design.

Efeito de ripples baseado no Material Design feito com CSS, JavaScript e jQuery Esse efeito utiliza seletores do jQuery e manipulação do DOM para obte

Gabriel Figueredo 10 Nov 24, 2022
BVSelect-VanillaJS - BVSelect - Vanilla Javascript Fully Customizable SelectBox

BVSelect - Vanilla JS Replaces native select elements with fully customizable dropdowns. Demo: https://bmsvieira.github.io/BVSelect-VanillaJS/ Feature

Bruno Vieira 107 Dec 26, 2022
An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Okoye Charles 14 Oct 3, 2022
Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Cuberto Reeller Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Cuberto 41 Jan 4, 2023
Simple fixed background parallax effect in vanilla js.

Simple Parallax Simple fixed background parallax effect in vanilla js. See demo on Codepen. JS Initialise the plugin. The first argument identifies th

null 6 Jun 27, 2022
A JavaScript plugin for creating a tickerboard effect. Plugin for React or vanilla JS.

ticker-board A JavaScript plugin for creating a tickerboard effect. See the Ticker Board page for more info. Importing it There are basically two ways

Robin James Kerrison 6 Aug 11, 2022
Obsidian text generator Plugin Text generator using GPT-3 (OpenAI)

is a handy plugin for Obsidian that helps you generate text content using the powerful language model GP

null 356 Dec 29, 2022
Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

Vineeth.TR 16 Dec 6, 2022
Create your own password generator using jQuery, Vanilla JS, and SASS.

Password Generator Create your own password generator using jQuery, Vanilla JS, and SASS. I have been working with JS for my last few projects so I th

The Dev Drawer 1 Jul 12, 2021
This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Eduardo Dantas 7 Jul 19, 2022
Ios-calculator-js - Calculator made with vanilla javascript and custom css based on the design of iOS devices.

ios-calculator-js This is a practice project in which I try to replicate iOS calculator's both logic and styling. In case you spot room for improvemen

Franco 1 Nov 10, 2021