100% Hardware Accelerated

#### List Motions

Tap an item

## .animate-blinds

ionicMaterialMotion.blinds();

## .animate-ripple

ionicMaterialMotion.ripple();

## .animate-fade-slide-in

ionicMaterialMotion.fadeSlideIn();

## .animate-fade-slide-in-right

ionicMaterialMotion.fadeSlideInRight();

#### HTML

Add an animation class to your <ion-list>
<ion-list class="animate-ripple"> <ion-item nav-clear menu-close class="item-icon-right item-avatar"> <img src="img/material4.jpg"> <h2>List title</h2> <p>List description</p> <i class="icon ion-chatbubble muted"></i> </ion-item> (...) </ion-list>

Animation classes: animate-blinds, animate-ripple, animate-fade-slide-in, animate-fade-slide-in-right

#### JS

Invoke after your list has been added to the DOM
(e.g. in your controller)
ionicMaterialMotion.ripple();

Motion methods: .blinds(), .ripple(), .fadeSlideIn(), .fadeSlideInRight()

#### API Options

Each animation can be customized

Use a configuration object to tune the animation.

var config = { finishDelayThrottle: 2, finishSpeedPercent: 0.5, leftOffsetPercentage: 0.8, selector: '#my-list', startVelocity: 1100 }; ionicMaterialMotion.ripple(config);

#### Tips

Light as a feather

...flows much better. If you run into performance problems, watch out for unnecessary nesting, css shadows/gradients, or larger-resolution-than-needed images.

Use as an accent, not a distration

"A critical aspect of motion for material design is to retain the feeling of physicality without sacrificing elegance, simplicity, beauty, and the magic of a seamless user experience." - Google