CODEWITHSUNDEEP
javascriptangularjscssanimationmaterial-design
Rahat Khanna
Rahat Khanna

Reputation: 4672

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

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.

Upvotes: 17

Views: 22200

Answers (5)

Vishwajeet Vatharkar
Vishwajeet Vatharkar

Reputation: 1196

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.

Upvotes: 1

isaldarriaga
isaldarriaga

Reputation: 191

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."

Upvotes: -4

Sat Mandir Khalsa
Sat Mandir Khalsa

Reputation: 647

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

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

Upvotes: 2

Dogfalo
Dogfalo

Reputation: 236

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.

Upvotes: 12

Pixelomo
Pixelomo

Reputation: 6737

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

Upvotes: 4

Related Questions