Animations in Angular 5 & Material Design

This is an attempt to get into animations safely, with a strong guide, Gerard Sans :

Angular — Applying Motion principles to a listing

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.

Module 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

app.mat.module.ts for animations with Angular 5

Main module

Then, import this material module in the main module:

Template changes

For buttons, since Angular Material beta-12, everything is `mat-something`, instead of md-something being recognized.
So, i had to change mb-fab to mat-fab.

Moreover, i had to change the icons to add and delete.

That’s it for the template.

Component changes

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.

:enter transition

So, i putted 0.7s instead of 1s for the :enter animate:

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

:leave transition

I putted 0.6s instead of 1s the :leave animate.

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

Css changes

No changes at all.

Github repo

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:

johanchouquet/motion-design-in-angular-5

Conclusion

Thank you all for reading, and a big UP to Gerard Sans for this.

The result

Animation in Angular 5, a bit of Motion Design