Material ripple effects for AngularJs
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Material ripple effects directive for AngularJS, Inspired by Angular Material Design , this implementation contains the ripple animation for buttons and links




  • AngularJs

You can also use jQuery version



$ npm install ng-ripple

or Bower

$ bower install ngRipple


Various examples:


Create directive with Element:


or with Class:

<a href="#" class="ripple"></ripple>

or with Attibute:

<a href="#" data-ripple></ripple>


<a href="#" ripple></ripple>

Add material button with box-shadow:

<ripple class="r-raised"></ripple>

Icon element:

<ripple class="r-icon"></ripple>

Fab element:

<ripple class="r-round r-raised"></ripple>

Disabled ripple

<ripple r-disabled></ripple>

or Disabled active

<ripple clas="r-int-disabled"></ripple>

or Disabled all element:

<ripple class="disabled"></ripple>

Custom light color

<ripple r-light></ripple>

Custom ripple color

<ripple r-color="#f00"></ripple>

Custom ripple opacity

<ripple r-opacity=".2"></ripple>

Ripple in-front (overink)

<ripple class="r-overink"></ripple>

Prevent ink for specific element and children

	<div class="r-noink">
		I hate ink
		I love ink

Prevent ink with specific class

	<div class="selected" r-prevent=".selected"></div>

Ripple on click (only child element)

	<div class="r-noink-hover"></div>

Angular Options['rippleConfig', function(rippleConfig){
		rippleConfig.rippleOpacity = .2;
		rippleConfig.rippleDelay = 100;
		rippleConfig.mobileTouch = false; // False (default): Mobile use ONLY click || True: mobile use touchstart and touchend

Ripple Opacity (rippleOpacity):

For all element

Ripple Incremental (rippleDelay):

This is the delay of exit animation of ink


Version 1.0.2:

Fix duplication ng-* directive

Version 1.0.1:

Fix and new options

Version 1.0.0:

Fix standalone, recreate ripple effects

Version 0.9.6:

Fix for Safari and Chrome 51 (Animation Bug)

Version 0.9.5:

Re-created animation of ink and general fix

Version 0.9.4:

Added r-overink for big element, added r-noink (prevent ink generation when you click a specific element)

Version 0.9.3:

Fix overflow ink problem

Version 0.9.1:

Fix disabled option.

Version 0.9.0:

Add standalone version.

Version 0.5.1:

Add Fab option.