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

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

Posted by: admin November 30, 2017 Leave a comment

Questions:

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.

Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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

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

Questions:
Answers:

Angular Material Project does not provide animations, but in general, for AngularJS, I’ve found following package very useful

ng-fx

You can simply install this package and inject it as dependancy, and then adding animations is as simple as adding the specific classes to our HTML.

You still need go through material design guidelines and figure out which animations are suitable and where they should be used.

Questions:
Answers:

Try using this

https://material.angularjs.org

“The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

Similar to the Polymer project’s Paper elements collection, Angular Material is supported internally at Google by the Angular.js, Material Design UX and other product teams.”