Animations in Angular 5 & Material Design
This is an attempt to get into animations safely, with a strong guide, Gerard Sans :
How to apply Motion principles using Angular Animationsmedium.com
The purpose of this article is to present the work of Gerard Sans, with the latest Angular versions of components as of today (angular v5.1.0 / angular-cli v1.6.0 / angular-material v5.0.1).
For this to work, I did the following changes.
- update the
package.json with latest versions for Angular & Cli & Material, then install new dependencies,
- create a dedicated Material Module, so that everything related to Material is in one place only,
- import the new specific material module in the Main Module, so that everything is ready to work.
From the package.json file:
Dedicated material module
Then, import this material module in the main module:
For buttons, since Angular Material beta-12, everything is `mat-something`, instead of md-something being recognized.
So, i had to change
Moreover, i had to change the icons to
That’s it for the template.
Very few changes. Everything is fine with Gerard Sans implementation of course. I just felt that some parameters had to a changed, but this is purely cosmetic, and allows us to see a more ‘dynamic’ version of the boxes coming and leaving.
So, i putted 0.7s instead of 1s for the
`animate(‘0.7s cubic-bezier(.8, -0.6, 0.26, 1.6)’,`
As you can see, I also changed a little bit the cubic-bezier to cubic-bezier(.8, -0.6, 0.26, 1.6), so that the exageration was a little more visible.
I putted 0.6s instead of 1s the
`animate(‘0.6s cubic-bezier(.8, -0.6, 0.2, 1.5)’`
The list of boxes
I also needed to have more items to boxes list, so that i could enjoy the initial setup of our animation. The counter was also initiated according to the length of this list.
No changes at all.
I uploaded a Github repository of this, in case someone is interested in having latest angular up and running, with Gerard Sans’s work in it.
Here is the link:
Contribute to motion-design-in-angular-5 development by creating an account on GitHub.github.com
Thank you all for reading, and a big UP to Gerard Sans for this.