[Gerard Sans] Reactive Animations Using Angular

slides.com/gerardsans | @gerardsans Reactive Animations

Google Developer Expert Google Developer Expert

Master of Ceremonies Master of Ceremonies

Blogger Blogger

International Speaker International Speaker Spoken at 53 events in 18
countries

Angular Trainer Angular Trainer

Community Leader Community Leader 900 1K

Angular Angular In Flip Flops In Flip Flops

Why use Why use Why use Why use Animations? Animations?

Improved UX Improved UX ✨ ✨

Perceived Performance Perceived Performance

Immersive interactions Immersive interactions

Better engagement Better engagement

User happiness User happiness User happiness User happiness

CSS CSS CSS CSS Introduction Introduction

Cascading Style Sheets Cascading Style Sheets Styling HTML Elements CSS
rules Speciﬁcity and order Box model

HTML Page life-cycle HTML Page life-cycle Load HTML Parse HTML
Load CSS Parse CSS Create DOM tree Display Attach style to DOM nodes source: blog

CSS Rule CSS Rule SELECTOR a.active:hover { color: #333; }
PROPERTY VALUE DECLARATION

pseudo classes/elements pseudo classes/elements :hover :link :active :target :not(selector) :focus
::ﬁrst-letter ::ﬁrst-line ::before ::after ::selection

Specificity and Order Specificity and Order Element style Element id
class/attribute selectors element selectors last CSS rule wins

Box Model Box Model source: blog

Animations Animations

Introduction Introduction Build on top of CSS Transitions CSS Animations
(@keyframes) Web Animations API

Web Web Web Web Animations Animations API API

Background Background Integrate CSS, JS and SVG CSS hardware acceleration
CSS variables + JS requestAnimationFrame (rAF) setInterval , (GSAP) Velocity GreenSock

source: blog

index.html index.html <html> <head> <script src="https://unpkg.com/[email protected]"></script> ... </head> <body> <my-app>
loading... </my-app> </body> </html>

Angular CLI 1.0 Angular CLI 1.0 npm install web-animations-js --save
// src/polyfills.ts import 'web-animations-js';

CSS CSS CSS CSS Transitions Transitions

DURATION START END CSS Transitions CSS Transitions

CSS Transitions CSS Transitions Define an initial and final state
Intermediate states are calculated automatically We can choose which CSS properties we want to affect Not all CSS properties are animatable ( ) list

Animatable CSS Animatable CSS all background* border* bottom box- shadow
clip clip-path color ﬁlter font* height left margin* mask* oﬀset* opacity outline* padding* perspective* right text-decoration text-shadow top transform vertical- align visibility width z-index

transition transition PROPERTY transition: color 5s ease-in 1s; DURATION TIMING
DELAY

timing function/easing timing function/easing DEMO

CSS CSS CSS CSS Animations Animations

DURATION 0% 100% CSS Animations CSS Animations KEYFRAMES

CSS Animations CSS Animations Define any number of states between
the initial and final state Changes from states are calculated automatically We can choose which CSS properties we want to affect

CSS Animation CSS Animation NAME animation: fade 5s 1s inﬁnite
linear; DURATION DELAY ITERATIONS TIMING

CSS Animation CSS Animation @keyframes fade { 0% { opacity:
1; } 100% { opacity: 0; } }

CSS Animation CSS Animation @keyframes fade { from { opacity:
1; } to { opacity: 0; } }

Move transform: translateX(10px); Resize transform: scale(0.5); Rotate transform: rotate(1turn); Fade
opacity: 0;

Move Move <div class="circle base elastic"></div> .base { animation: move
2s infinite; } .elastic { animation-timing-function: cubic-bezier(.8,-0.6,0.2,1.5); } @keyframes move { 0% { transform: translateX(-250px); } 40%, 60% { transform: translateX(50px); } 100% { transform: translateX(250px); } }

Rotate Rotate <div class="square base linear"></div> .base { animation: spin
2s infinite; } .linear { animation-timing-function: linear; } @keyframes spin { to { transform: rotate(1turn); } }

Resize Resize <div class="circle base"></div> .base { animation: size 2s
infinite; } @keyframes size { 0%, 40%, 100% { transform: scale(1); } 25%, 60% { transform: scale(1.1); } }

Fade Fade <div class="circle base elastic"></div> .base { animation: fade
2s infinite; } @keyframes fade { 0% { transform: translateX(0px); opacity: 0; } 40%, 60% { transform: translateX(80px); opacity: 1; } 100% { transform: translateX(0px); opacity: 0; } }

Angular Angular Angular Angular Animations Animations

States & Transitions States & Transitions

void * Special Keywords Special Keywords void => * :enter
* => void :leave void <=> * STATE STATE

fadeIn fadeOut States & Transitions States & Transitions TRANSITIONS STATE
STATE fadeIn => fadeOut fadeOut => fadeIn fadeIn <=> fadeOut

Animations Setup Animations Setup // npm install --save @angular/animations //
app.module.ts import {Component, NgModule} from '@angular/core'; import {BrowserAnimationsModule} from '@angular/platform-browser/animat @Component({ }) export class App { } @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule)

Animation Example Animation Example import {fade} from './animations'; @Component({ selector:
'my-app', template: `<button [@fade]='fade' (click)="toggleFade()">Fade</button animations: [ fade ] }) export class App { fade = 'fadeIn'; toggleFade(){ this.fade = this.fade === 'fadeIn' ? 'fadeOut' : 'fadeIn'; } }

Animation Example Animation Example import { trigger, transition, state, style,
animate } from '@angular/animations'; export const fade = trigger('fade', [ state('fadeIn', style({ opacity: 1 })), state('fadeOut', style({ opacity: 0.1 })), transition('fadeIn <=> fadeOut', animate('2000ms linear')) ]);

Execution Order Execution Order sequence group time

Composition Composition animateChild time

Stagger Stagger time

Dynamic Selectors Dynamic Selectors class="container" class="item" class="item" query(selector)

Dynamic Selectors Dynamic Selectors query('.item') class="container" class="item" class="item"

Dynamic Selectors Dynamic Selectors query('.item:enter') class="container" class="item" class="item" class="item" added

demo demo

Router Router Router Router Transitions Transitions

Router transitions Router transitions import { routerTransition } from './router.animations';
@Component({ template: ` <main [@routerTransition]="getState(o)"> <router-outlet #o="outlet"></router-outlet> </main> `, animations: [ routerTransition ] }) export class App { getState(outlet) { return outlet.activatedRouteData.state; } }

Routes Setup Routes Setup const routes = [ { path:
'', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: Home, data: { state: 'home'} }, { path: 'about', component: About, data: { state: 'about'} }, { path: '**', component: NotFound } ];

Router transitions Router transitions export const routerTransition = trigger('routerTransition', [
transition('about <=> home', [ query(':enter, :leave', style({ position: 'fixed', width:'100%' })) group([ query(':enter', [ style({ transform: 'translateX(100%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' ]), query(':leave', [ style({ transform: 'translateX(0%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(100% ]), ]) ]) ])

demo demo

Performance Performance Performance Performance

Considerations Considerations Avoid unnecessary layout/repaint Avoid unnecessary layout/repaint Use opacity,
transform Use opacity, transform Hardware acceleration (avoid) Hardware acceleration (avoid) transform: translateZ(0) transform: translateZ(0)

Saving Resources Saving Resources .visible.advert { will-change: transform; } .visible.advert:hover
{ transform: scale(1.2); }

[Gerard Sans] Reactive Animations Using Angular

[Gerard Sans] Reactive Animations Using Angular

More Decks by Google Developers Group Lviv

Other Decks in Technology

Featured

Transcript