Material Design Click Ripple Effect In Vanilla Javascript – Material Touch

Preview:

Description:

A vanilla JavaScript solution to create Google Material Design inspired click/tap ripple animations on your action buttons.

How to use it:

Load the Material Touch JS library at the end of the document.

<script src="js/md.js"></script>

Add the CSS class md-ripple to your action buttons.

<button class="md-ripple">Demo button</button>

The core CSS styles for the ripple animations.

.md-ripple {
  overflow: hidden;
  position: relative;
}
.md-ripple * { pointer-events: none; }
.md-ripple-effect {
  pointer-events: none;
  position: absolute;
  display: block;
  background: #000;
  width: 0;
  height: 0;
  border-radius: 100%;
  z-index: 1;
}

Enable the ripple animation.

new materialTouch('.md-ripple');

materialTouch() options.

// new materialTouch(rippleIdentifier, custom_options);
new materialTouch('.md-ripple', {
classes: {
  rippleContainer: 'md-ripple-wrapper',
  ripple: 'md-ripple-effect'
},
transition: {
  easing: 'easeOutExpo',
  delay: 0,
  duration: 600
},
opacity: 0.5,
size: 0.75,
center: false
});