Tiny Cross-platform Ripple Animation Library – ripple.js

Category: Animation , Javascript | April 11, 2016
Views Total:965 views
Official Page:Go to website
Last Update:April 11, 2016


Tiny Cross-platform Ripple Animation Library – ripple.js


ripple.js is a simple, lightweight JavaScript library for creating Google Material Design inspired ripple effects that work on both desktop and mobile devices.

Basic usage:

Download and add the minified version of ripple.js into your html document.

<script src="ripple.min.js"></script>

Initialize the Ripple.js on page load.

window.onload = function() {

Config the ripple effect with the following attributes.

  • ripple-color: The background of the ripple. Also accepts background images.
  • ripple-opacity: The opacity of the ripple.
  • ripple-shadow: The box-shadow of the ripple.
  • ripple-press-expand-time: The time the ripple needs to fully expand while the element is being pressed.
  • ripple-release-expand-time: The time the ripple needs to ripple away when the user releases the mouse / touch.
  • ripple-leave-collapse-time: The time the ripple collapses in itselft when the user moves the touch / mousepress away from the element.
<div class="ripple"  

Execute a callback after the ripple effect is triggered.

document.getElementById('container').addEventListener('ripple-button-click', function() {
  alert('The element got succesfully clicked!');


You Might Be Interested In:

Leave a Reply