100% Hardware Accelerated

List Motions

Tap an item

.animate-blinds

ionic.material.motion.blinds();

.animate-ripple

ionic.material.motion.ripple();

.animate-fade-slide-in

ionic.material.motion.fadeSlideIn();

.animate-fade-slide-in-right

ionic.material.motion.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)

ionic.material.motion.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 }; ionic.material.motion.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