Introduction on animations for Angular applications + heads ups for some tricky bits. Don't forget to visit the included links: - https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc - https://medium.com/frontend-coach/angular-in-motion-4-approaches-to-animation-1aa7426aae5a - https://medium.com/frontend-coach/angular-router-animations-what-they-dont-tell-you-3d2737a7f20b ... and follow me on twitter https://twitter.com/sulco for more on Angular, TypeScript and frontend in general.

1. “I like to move it”
Anima&ng Angular Applica&ons

2. … but why?
‣ Expecta&on
‣ Con&nuity
‣ Narra&ve
‣ Rela&onship
https://medium.com/ux-in-motion/creating-usability-
with-motion-the-ux-in-motion-manifesto-a87a4584ddc
User Experience experts say:

3. @sulco
Tomek Sułkowski
engineer @ fourTheorem and @ StackBlitz trainer

4. declara3ve impera3ve

5. declara3ve impera3ve

6. basics

7. Setup
import {
BrowserAnimationsModule
} from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule,
]
})
export class AppModule { }
Just use BrowserAnimationsModule

8. Setup
import {
BrowserAnimationsModule
} from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule,
]
})
export class AppModule { }
Just use BrowserAnimationsModule
NoopAnimationsModule
for tests

9. Seman3cs
Trigger
func&on linking anima&on with a specific
element (i.e. an “anchor” for anima&on)
State
descrip&on of style in a discrete moment
Transi3on
descrip&on of the way styles change from
one state to another
Angular anima&ons nomenclature
state:
“on”
state:
“off”
trigger: @myFade

10. Implementa3on
trigger('myFade', []);
import { …stuff… } from ‘@angular/anima&ons’
state:
“on”
state:
“off”
trigger: @myFade

11. Implementa3on
trigger('myFade', [
state('on', style({opacity: 1.0})),
state('off', style({opacity: 0.3})),
]);
import { …stuff… } from ‘@angular/anima&ons’
state:
“on”
state:
“off”
trigger: @myFade

12. Implementa3on
trigger('myFade', [
state('on', style({opacity: 1.0})),
state('off', style({opacity: 0.3})),
transition('on !=> off', animate('300ms ease-in')),
transition('off !=> on', animate('100ms ease-in')),
]);
import { …stuff… } from ‘@angular/anima&ons’
state:
“on”
state:
“off”
trigger: @myFade
300ms
100ms

13. Implementa3on
trigger('myFade', [
state('on', style({opacity: 1.0})),
state('off', style({opacity: 0.3})),
transition('on !=> off’,
'off !=> on', animate('300ms ease-in')),
]);
import { …stuff… } from ‘@angular/anima&ons’
state:
“on”
state:
“off”
trigger: @myFade
300ms
300ms

14. Implementa3on
trigger('myFade', [
state('on', style({opacity: 1.0})),
state('off', style({opacity: 0.3})),
transition('on !!<=> off', animate('300ms ease-in’)),
]);
import { …stuff… } from ‘@angular/anima&ons’
state:
“on”
state:
“off”
trigger: @myFade
300ms
300ms

15. Implementa3on
trigger('myFade', [
state('on', style({opacity: 1.0})),
state('off', style({opacity: 0.3})),
transition(‘* !!<=> *’, animate('300ms ease-in’)),
]);
import { …stuff… } from ‘@angular/anima&ons’
state:
“on”
state:
“off”
trigger: @myFade
300ms
300ms
state:
“!!...”
300ms

16. Implementa3on
trigger('myFade', [
state('on', style({opacity: 1.0})),
state('off', style({opacity: 0.3})),
transition('void !=> *', animate('300ms')),
transition('* !=> void', animate('100ms')),
]);
transition(‘:enter', animate('300ms')),
transition(':leave', animate(‘100ms')),
import { …stuff… } from ‘@angular/anima&ons’
state:
“on”
void
trigger: @myFade
void

17. Usage
<div
[@myFade]="myState"
(click)="myState ""=== 'off' ? 'on' : 'off'"
>
Click me
"</div>
“@” - yet another symbol in Angular templates
@Component({
animations: [
trigger('myFade', [....])
]
})
state:
“on”
state:
“off”
trigger: @myFade
300ms
100ms

18. Usage
<div
[@myFade]="myState"
(click)="myState ""=== 'off' ? 'on' : 'off'"
>
Click me
!</div>
“@” - yet another symbol in Angular templates
@Component({
animations: [
trigger('myFade', [....])
]
})
state:
“on”
state:
“off”
trigger: @myFade
300ms
100ms

19. Usage
<div
[@myFade]="myState"
(click)="myState ""=== 'off' ? 'on' : 'off'"
(@myFade.start)="handleStart($event)"
(@myFade.done)="handleDone($event)"
>
Click me
!</div>
Callbacks (“let me know when you…”)
state:
“on”
state:
“off”
trigger: @myFade
300ms
100ms

20. Usage
<div
[@myFade]="myState"
(click)="myState ""=== 'off' ? 'on' : 'off'"
(@myFade.start)="handleStart($event)"
(@myFade.done)="handleDone($event)"
>
Click me
!</div>
Callbacks (“let me know when you…”)
state:
“on”
state:
“off”
trigger: @myFade
300ms
100ms
interface AnimationEvent {
fromState: string
toState: string
totalTime: number
phaseName: string
element: any
triggerName: string
disabled: boolean
}

21. staggering

22. Seman3cs 102
Query
select elements (inside a trigger)
that match a query token
Stagger
a series of anima&ons applied to subsequent
found element with a delay between them
Some more anima&on nomenclature <div>"</div>
trigger: @myStagger
<div>"</div>
<div>"</div>
:enter
.item
@*
<div>"</div>
<div>"</div>
<div>"</div>
examples of query tokens:
- anima&on keyword
- css selector
- trigger name

23. Implementa3on
<div [@myStagger]="items.length">
<div *ngFor="let item of items">
{{ item }}
"</div>
"</div>
<div>"</div>
trigger: @myStagger
<div>"</div>
<div>"</div>
<div>"</div>
<div>"</div>
<div>"</div>

24. Implementa3on
<div [@myStagger]="items.length">
<div *ngFor="let item of items">
{{ item }}
"</div>
"</div>
<div>"</div>
trigger: @myStagger
<div>"</div>
<div>"</div>
<div>"</div>
<div>"</div>
<div>"</div>
trigger('listAnimation', [
transition('* "=> *', [
query(':leave', [
stagger(100, [
animate('0.5s', style({ opacity: 0 }))
])
]),
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('0.5s', style({ opacity: 1 }))
])
])
])
])

25. Implementa3on
<div [@myStagger]="items.length">
<div *ngFor="let item of items">
{{ item }}
"</div>
"</div>
<div>"</div>
trigger: @myStagger
<div>"</div>
<div>"</div>
<div>"</div>
<div>"</div>
<div>"</div>
trigger('listAnimation', [
transition('* "=> *', [
query(':leave', [
stagger(100, [
animate('0.5s', style({ opacity: 0 }))
])
]),
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('0.5s', style({ opacity: 1 }))
])
])
])
])

26. router
anima3on

27. Implementa3on
<RouterOutlet>
is a direc&ve (exportAs: “outlet”) with
activatedRoute & activatedRouteData
proper&es
<main [@routerAnim]="getState(outletRef)">
<router-outlet #outletRef=“outlet”>
"</router-outlet>
"</main>
We can use this to get a state value
for an anima&on trigger.
getState(outletRef: RouterOutlet) {
return outletRef.activatedRouteData.name;
}

28. Implementa3on
trigger('routerTransition', [
transition('* ""<=> *', [
group([
query(':enter', [
style({transform: 'translateX(100%)'}),
animate('0.4s ease-in-out’,
style({transform: 'translateX(0%)'}))
], {optional: true}),
query(':leave', [
style({transform: 'translateX(0%)'}),
animate('0.4s ease-in-out’,
style({transform: ‘translateX(100%)'}))
], {optional: true}),
]),
]),
])

29. Heads up!
Anima&ons within the same route
won’t work by default.
@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [{
provide: RouteReuseStrategy,
useClass: CustomReuseStrategy
}],
})
export class CustomReuseStrategy implements RouteReuseStrategy {
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return curr.component ""!== MyFruitComponent;
}
… (see the full class)

30. Heads up!
Anima&ons within the same route
won’t work by default.
@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [{
provide: RouteReuseStrategy,
useClass: CustomReuseStrategy
}],
})
export class CustomReuseStrategy implements RouteReuseStrategy {
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return curr.component ""!== MyFruitComponent;
}
… (see the full class)

31. Heads up!
Anima&ons within the same route
won’t work by default.
@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [{
provide: RouteReuseStrategy,
useClass: CustomReuseStrategy
}],
})
export class CustomReuseStrategy implements RouteReuseStrategy {
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return curr.component ""!== MyFruitComponent;
}
… (see the full class)

32. declara3ve impera3ve

33. Anima3onBuilder
Anima3onBuilder
with the build() method creates
a configured Anima&onFactory
Anima3onFactory
with the create() method creates
an Anima&onPlayer
Anima3onPlayer
allows to control the anima&on
like FormBuilder… but for anima&ons

34. Anima3onBuilder
const factory = this.animBuilder.build([
]);
this.player = factory.create(this.containerRef.nativeElement);
this.player.play();
this.player.onDone(() "=> resolve());
query(tilesQuery, style({ transform: 'translate3d(0, 0, 0)' }), { optional }),
query(
tilesQuery,
stagger(50, [
animate('900ms’,style({ transform: 'rotateX(180deg)' })),
]),
{ optional },
),

35. query(tilesQuery, style({ transform: 'translate3d(0, 0, 0)' }), { optional }),
query(
tilesQuery,
stagger(50, [
animate('900ms’,style({ transform: 'rotateX(180deg)' })),
]),
{ optional },
),
Anima3onBuilder
const factory = this.animBuilder.build([
]);
this.player = factory.create(this.containerRef.nativeElement);
this.player.play();
this.player.onDone(() "=> resolve());

36. Anima3onBuilder
const factory = this.animBuilder.build([
query(tilesQuery, style({ transform: 'translate3d(0, 0, 0)' }), { optional }),
query(
tilesQuery,
stagger(50, [
animate('900ms’,style({ transform: 'rotateX(180deg)' })),
]),
{ optional },
),
]);
this.player = factory.create(this.containerRef.nativeElement);
this.player.play();
this.player.onDone(() "=> resolve());

37. Actually…

38. Anima3onBuilder
const factory = this.animBuilder.build([
query(tilesQuery, style({ transform: 'translate3d(0, 0, 0)' }), { optional }),
query(
tilesQuery,
stagger(50, [
animate('900ms’,style({ transform: 'rotateX(180deg)' })),
]),
{ optional },
),
]);
this.player = factory.create(this.containerRef.nativeElement);
this.player.play();
this.player.onDone(() "=> resolve());

39. RxJS + Web Anima3ons API
const animationOptions = { duration: 900, fill: ‘forwards' }
const keyframes = [
{ transform: 'translate3d(0, 0, 0)' },
{ transform: 'rotateX(180deg)' }
];
return timer(0, 50, animationFrame)
.pipe(
take(tiles.length),
map(i "=> tiles[i].animate(keyframes, this.animationOptions)),
reduce((anims, anim) "=> [""...anims, anim], []),
delay(this.animationOptions.duration),
tap(anims "=> anims.forEach(anim "=> anim.cancel())),
);

40. teraz nie zapomnij pokazać dema :p

41. More on anima&ons
‣ Angular in Mo&on: 4 approaches to anima&on
‣ Angular Router Anima&ons - what they don't tell you
Ok, cheers!
h`ps://twi`er.com/sulco