A session about animations and Angular that was delivered in AngularUP conference

1. Demystifying Angular Animations
Gil Fink
CEO and Senior Consultant, sparXys

2. Why to bother with animations?

3. Better user experience (UX)

4. Indicating that something
happening/happened

5. Just because we want a cool and
shiny website!

6. But…
Web animation is HARD!

7. About Me
• sparXys CEO and senior consultant
• Microsoft MVP in the last 8 years
• Pro Single Page Application Development (Apress) co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer

8. Agenda
• Web animation
• Building our own Angular animation implementation
• Angular animation in a nutshell

9. Web Animation Options
• Use JavaScript animation library
• Use CSS3 modules
• CSS3 Animations
• CSS3 2D and 3D Transform
• CSS3 Transitions

10. Welcome Web Animation API

11. Web Animation API
• Enables you to hook into the browser’s animation engine
• Implemented on top of CSS3 animation and transitions
• Enables the ability to change animations during runtime

12. Web Animation API in a Nutshell
• Use the new animate function
• Pass Keyframes array and AnimationEffectTimingProperties object
document.getElementById("myPic").animate(
[
{transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000'},
{transform: 'translate3D(10%, 10%, 0)', backgroundColor: '#ff0000'},
{ transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000' }
], {
duration: 3000,
iterations: Infinity
}
);

13. Web Animation API
Demo

14. Web Animation API Support
Taken from “Can I Use…” website
• Use polyfill –
https://github.com/web-animations/web-animations-js

15. How can we use Web Animation
API with Angular?

16. Building our own Angular
animation decorator
Demo

19. @angular/animations
• Based on Web Animation API
• Animations are separated from Angular core
• Totally refactored
• Fully dynamic

20. Angular Animation Module Setup
• Import the BrowserAnimationsModule to your ngModule
import {BrowserAnimationsModule} from "@angular/platform-
browser/animations";
@NgModule({imports: [BrowserAnimationsModule]})

21. How to Use Animation?
• Create animation trigger in the component template
• Describe the trigger in the component decorator
<div [@fade]="active ? 'in' : 'out'">hello there</div>
import {trigger, ...} from '@angular/animatons';
@Component({
animations: [trigger('fade', [ /*...*/ ])]
})

22. How to Use Animation? – Cont.
• In the trigger you set
• Transitions
• States
trigger('fadeIn', [
transition('out => in', [ style({ opacity: 0 }),
animate(1000, style({ opacity: 1 })) ])
])

23. Basic Angular Animation
Demystified
Demo

24. States and Transitions
• Named states define styling of an element in state
• Transitions defines what happens when we move from one state to
another (use =>)
state('state name', style({…}))
transition('* => in', [ style({…}), animate(1000, style({…})) ])

25. Working with keyframes
• keyframes enables the creation of intricate animation
• Defined using the keyframes function and keyframe array
transition('void => *', [
animate(300, keyframes([
style({…, offset: 0}),
style({…, offset: 0.4}),
style({…, offset: 1.0})
]))
])

26. Animation Groups
• Run animations in parallel using grouping
• Use the group function
transition('void => *', [
style({…}),
group([
animate('0.3s 0.1s ease', style({…})),
animate('0.3s ease', style({…}))
])
])

27. Animation Callbacks
• You can wire to animation start and end callbacks
• Use the trigger start and done handlers
<li *ngFor="…"
(@fade.start)="animationStarted($event)"
(@fade.done)="animationDone($event)"
[@fade]="'in'">
…
</li>

28. Adding Angular Animation to an
App
Demo

29. Summary
• Embrace the new Web Animation API
• Decorate components with animation in Angular apps
• Make your users happy!

30. Resources
• Animations in Angular website - http://bit.ly/2ppuxsM
• ng-conf Animation video - http://bit.ly/2pSbhqe
• My Website – http://www.gilfink.net
• Follow me on Twitter – @gilfink

31. Thank You!