Demystifying Angular Animations

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!