AngularJS Material Design does not have Animations support, how to achieve?

Question

I am making a Hybrid App using AngularJS and want it to be based on the Material Design UI Principles. I have been reading about this on the google website. They have explained a lot about the natural animations that material should undergo. I am loving the demonstrations on this page.

http://www.google.com/design/spec/material-design/introduction.html

However, the supporting open source project Angular Material Design does not have any directives or provisions for these animations. How can I achieve this animations please guide.

I am planning to do it using CSS3 Animations. How should I use them and what should be the architecture, please suggest.

Answer 1

If you haven't decided already, Materialize (http://materializecss.com) is a Material Design based CSS framework that is very easy to use. It is structured similarly to Bootstrap. The animations have cubic easing that gives it the natural feel.

Answer 2

Not sure if this will be any help to you but a CSS framework has been built based on Material Design http://material-ui.com

Answer 3

You could use famo.us. Here's a proof of concept:

http://blog.aminjam.com/building-mobile-apps-with-famous-and-angular-material/