Demystifying Angular Animations
Gil Fink
CEO and Senior Consultant, sparXys
Why to bother with animations?
Better user experience (UX)
Indicating that something happening/happened
Just because we want a cool and shiny website!
But… Web animation is HARD!
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
Agenda
• Web animation
• Building our own Angular animation implementation
• Angular animation in a nutshell
Web Animation Options
• Use JavaScript animation library
• Use CSS3 modules• CSS3 Animations
• CSS3 2D and 3D Transform
• CSS3 Transitions
Welcome Web Animation API
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
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
});
Web Animation APIDemo
Web Animation API Support
Taken from “Can I Use…” website
• Use polyfill –https://github.com/web-animations/web-animations-js
How can we use Web Animation API with Angular?
Building our own Angular animation decoratorDemo
@angular/animations
• Based on Web Animation API
• Animations are separated from Angular core
• Totally refactored
• Fully dynamic
Angular Animation Module Setup
• Import the BrowserAnimationsModule to your ngModule
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
@NgModule({imports: [BrowserAnimationsModule]})
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', [ /*...*/ ])]
})
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 })) ])
])
Basic Angular Animation DemystifiedDemo
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({…})) ])
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})
]))
])
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({…}))
])
])
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>
Adding Angular Animation to an AppDemo
Summary
• Embrace the new Web Animation API
• Decorate components with animation in Angular apps
• Make your users happy!
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
Thank You!