Animate your Angular apps

Animations are always exciting, in this presentation I have shown how much fun it is to create them with Angular.

Play around with the demo: https://stackblitz.com/edit/zen-feedback?embed=1&file=app/app.component.ts&view=preview

Transcript

1. Animateyour ANGULARapps
3. angular.io/guide/animations Well-designed animations can make a UI not only more fun but also easier to use “
6. @cironunesdev
8. Animations in JavaScript? Why not just CSS?
9. Animations in JavaScript? Why not just CSS? Dynamic elements, page transitions Animate independently of the amount of elements, animate routes
10. Animations in JavaScript? Why not just CSS? Dynamic elements, page transitions Programmatic animations Animate independently of the amount of elements, animate routes Full control over the logic of the animations
14. How can I animate in JS?
15. How can I animate in JS? Declarative Bind animations to the template
16. How can I animate in JS? Declarative Bind animations to the template Imperative Trigger animations programmatically
18. Agenda What are we going to learn today?
19. Agenda What are we going to learn today? Basic and multi-step 1
20. Agenda What are we going to learn today? Basic and multi-step 1 Dynamic # of items 2
21. Agenda What are we going to learn today? Basic and multi-step 1 Dynamic # of items 2 Page transitions 3
22. Agenda What are we going to learn today? Basic and multi-step 1 Dynamic # of items 2 Page transitions 3 Programatic animations 4
24. Create a project using the CLI
25. Create a project using the CLI
26. Create a project using the CLI ~ $ npm i -g @angular/cli
27. Create a project using the CLI ~ $ npm i -g @angular/cli ~ $ ng new my-project
28. ... import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ] }) export class AppModule {} Setup app.module.ts
29. ... import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ] }) export class AppModule {} Setup app.module.ts NoopAnimationsModule Protip: for tests use:
31. Web Animations API
33. Enable the polyfill
34. Enable the polyfill Hot of the press: in v6 it fallbacks to CSS Keyframes for you!
36. 1. Basic and multi-step
37. angular.io/guide/animations Good user interfaces transition smoothly between states with engaging animations that call attention where it's needed “
41. 1. Create the animation
42. import { trigger, ... } from '@angular/animations'; export const fadeAnimation = trigger('fade', [ state('inactive', style({ opacity: 0 })), state('active', style({ opacity: 1 })), transition('inactive <=> active', animate('450ms ease-in')) ]); Register the trigger fade.animation.ts
43. import { state, style, ... } from '@angular/animations'; export const fadeAnimation = trigger('fade', [ state('inactive', style({ opacity: 0 })), state('active', style({ opacity: 1 })), transition('inactive <=> active', animate('450ms ease-in')) ]); Setup states fade.animation.ts
44. import { transition, animate, ... } from '@angular/animations'; export const fadeAnimation = trigger('fade', [ state('inactive', style({ opacity: 0 })), state(‘active', style({ opacity: 1 })), transition('inactive <=> active', animate('450ms ease-in')) ]); Setup transitions fade.animation.ts
46. 2. Use it in a component
47. import { fadeAnimation } from './fade.animation'; @Component({ ..., animations: [fadeAnimation] }) export class HelloWorldComponent {} Import the animation hello.component.ts
48. import { fadeAnimation } from './fade.animation'; @Component({ ..., animations: [fadeAnimation] }) export class HelloWorldComponent {} Include it hello.component.ts
49. ... export class HelloWorldComponent { cmpState = 'inactive'; toggle() { this.cmpState = 'active'; } } Change state hello.component.ts
51. 3. Apply it in the template
52. <div [@fade]="cmpState" (@fade.start)="doSomething($event)" (@fade.done)="doSomethingElse($event)" > <h1>Hello world!</h1> </div> Apply the animation hello.component.html
53. <div [@fade]="cmpState" (@fade.start)="doSomething($event)" (@fade.done)="doSomethingElse($event)" > <h1>Hello world!</h1> </div> Callbacks hello.component.html
54. export interface AnimationEvent { fromState: string; toState: string; totalTime: number; phaseName: string; element: any; triggerName: string; } AnimationEvent animation_event.ts
56. What about multi-step animations?
57. animate('5s', keyframes([ style({ backgroundColor: 'red', offset: 0 }), style({ backgroundColor: 'blue', offset: 0.2 }), style({ backgroundColor: 'orange', offset: 0.3 }), style({ backgroundColor: 'black', offset: 1 }) ])); Keyframes multistep.animation.ts
58. animate('5s', keyframes([ style({ backgroundColor: 'red', offset: 0 }), style({ backgroundColor: 'blue', offset: 0.2 }), style({ backgroundColor: 'orange', offset: 0.3 }), style({ backgroundColor: 'black', offset: 1 }) ])); Keyframes multistep.animation.ts
60. 2. Dynamic # of items
62. transition('inactive => active’, [ query('.container .item', [ style({ opacity: 0, transform: 'translateY(-50px)' }), stagger(100, [ animate('500ms', style({ opacity: 1, transform: 'none' })) ]) ]) ]) Setup the transition appear.animation.ts
63. transition('inactive => active', [ query('.container .item', [ style({ opacity: 0, transform: 'translateY(-50px)' }), stagger(100, [ animate('500ms', style({ opacity: 1, transform: 'none' })) ]) ]) ]) Query the DOM appear.animation.ts
64. transition('inactive => active', [ query('.container .item', [ style({ opacity: 0, transform: 'translateY(-50px)' }), stagger(100, [ animate('500ms', style({ opacity: 1, transform: 'none' })) ]) ]) ]) Initial styles appear.animation.ts
65. transition('inactive => active', [ query('.container .item', [ style({ opacity: 0, transform: 'translateY(-50px)' }), stagger(100, [ animate('500ms', style({ opacity: 1, transform: 'none' })) ]) ]) ]) Animate one by one appear.animation.ts
68. 3. Page transitions
71. 1. Setup the template
72. <div [@routeAnimation]="getDepth(myOutlet)"> <router-outlet #myOutlet="outlet"></router-outlet> </div> Get data out of the outlet route.animation.ts
73. <div [@routeAnimation]="getDepth(myOutlet)"> <router-outlet #myOutlet="outlet"></router-outlet> </div> Bind to the animation route.animation.ts
74. <div [@routeAnimation]="getDepth(myOutlet)"> <router-outlet #myOutlet="outlet"></router-outlet> </div> Bind to the animation route.animation.ts Protip: you’ll want to use CSS to make your container use the whole page position: absolute; top: 0; right: 0; left: 0;
76. 2. Configure route data
77. Routes config route.animation.ts const ROUTES: Routes = [ { path: '', component: HomeComponent, data: { page: '1' } }, { path: 'about', component: AboutComponent, data: { page: '2' } } ];
78. Routes config route.animation.ts const ROUTES: Routes = [ { path: '', component: HomeComponent, data: { page: '1' } }, { path: 'about', component: AboutComponent, data: { page: '2' } } ];
80. 3. Setup the animation
81. transition('1 => 2', [ style({ height: '!' }), query(':enter', style({ transform: 'translateX(-100%)' })), group([ query(':leave', animate('.6s cubic-bezier(…)', style({ transform: 'translat query(':enter', animate('.6s cubic-bezier(…)', style({ transform: 'translat ]) ]) Initial styles. Notice the '!' route.animation.ts
82. 1 0 2 100% -100%
83. 1 2 -100% 100% 0
84. transition('1 => 2', [ style({ height: '!' }), query(':enter', style({ transform: 'translateX(-100%)' })), group([ query(':leave', animate('.6s cubic-bezier(…)', style({ transform: 'translat query(':enter', animate('.6s cubic-bezier(…)', style({ transform: 'translat ]) ]) Initial styles route.animation.ts
85. transition('1 => 2', [ style({ height: '!' }), query(':enter', style({ transform: 'translateX(-100%)' })), group([ query(':leave', animate('.6s cubic-bezier(…)', style({ transform: 'translat query(':enter', animate('.6s cubic-bezier(…)', style({ transform: 'translat ]) ]) Initial styles route.animation.ts Protip: :enter is just an alias for void => *
86. transition('1 => 2', [ style({ height: '!' }), query(':enter', style({ transform: 'translateX(-100%)' })), group([ query(':leave', animate('.6s cubic-bezier(…)', style({ transform: 'translateX(100%)' }))), query(':enter', animate('.6s cubic-bezier(…)', style({ transform: 'translateX(0)' }))) ]) ]) Parallelise with group route.animation.ts
87. transition('1 => 2', [ style({ height: '!' }), query(':enter', style({ transform: 'translateX(-100%)' })), group([ query(':leave', animate('.6s cubic-bezier(…)', style({ transform: 'translateX(100%)' }))), query(':enter', animate('.6s cubic-bezier(…)', style({ transform: 'translateX(0)' }))) ]) ]) Parallelise with group route.animation.ts Protip: :leave is just an alias for * => void
88. transition('1 => 2', [ style({ height: '!' }), query(':enter', style({ transform: 'translateX(-100%)' })), group([ query(':leave', animate('.6s cubic-bezier(…)', style({ transform: 'translateX(100%)' }))), query(':enter', animate('.6s cubic-bezier(…)', style({ transform: 'translateX(0)' }))) ]) ]) Parallelise with group route.animation.ts
91. 4. Programmatic animations
94. export class StoriesComponent { @Input('position') set position(pos: number) { this.pause(); this.player.setPosition(pos / 100); } play() { this.player.play(); } pause() { this.player.pause(); } } stories.component.ts
95. export class StoriesComponent { @Input('position') set position(pos: number) { this.pause(); this.player.setPosition(pos / 100); } play() { this.player.play(); } pause() { this.player.pause(); } } stories.component.ts
96. constructor(private builder: AnimationBuilder, private element: ElementRef) { const animation = this.builder.build([...]); const player = animation.create(this.element.nativeElement); } Inject builder and element stories.component.ts
97. constructor(private builder: AnimationBuilder, private element: ElementRef) { const animation = this.builder.build([...]); const player = animation.create(this.element.nativeElement); } Build the animation stories.component.ts
98. constructor(private builder: AnimationBuilder, private element: ElementRef) { const animation = this.builder.build([...]); const player = animation.create(this.element.nativeElement); } Create the player stories.component.ts
102. Takeaways
104. CSS can take you so far
109. Thanks! @cironunesdev
111. Bonus time! https://stackblitz.com/edit/zen-feedback
113. Slides of this talk: cnun.es/animations Interactive Angular animation guide: animationsftw.in Links Where to go? My website: cironunes.com Docs: next.angular.io/guide/animations