Animations

Workshop (v4+)

Google Developer Expert

Master of Ceremonies

Blogger

International Speaker

Angular Trainer (v4+)

Community Leader

850

900

CSS Introduction

Cascading Style Sheets

  • Styling HTML Elements
  • CSS rules
  • Specificity and order
  • Box model

HTML Page life-cycle

source: blog

CSS Rule

SELECTOR

a.active:hover {

       color: #333;

}

PROPERTY

VALUE

DECLARATION

pseudo classes/elements

:hover

:link

:active

:target

:not(selector)

:focus

::first-letter

::first-line

::before

::after

::selection

Specificity and Order

  • Element style

  • Element id

  • class/attribute selectors

  • element selectors

  • last CSS rule wins

Box Model

source: blog

Animations

Introduction

Web Animations API

Background

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

source: blog

index.html

<html>
  <head>
    <script src="https://unpkg.com/web-animations-js@2.2.5"></script>
    ...
  </head>

  <body>
    <my-app>
    loading...
    </my-app>
  </body>
</html>

Angular CLI 1.0

npm install web-animations-js --save

// src/polyfills.ts
import 'web-animations-js';

CSS Transitions

DURATION

START

END

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

all background* border* bottom box-shadow clip clip-path color filter font* height left margin* mask* offset* opacity outline* padding* perspective* right text-decoration text-shadow top transform vertical-align visibility width z-index

transition

PROPERTY

transition: color 5s ease-in 1s;

DURATION

TIMING

DELAY

timing function/easing

DEMO

CSS Animations

DURATION

0%

100%

CSS Animations

KEYFRAMES

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

NAME

animation:  fade  5s 1s infinite linear;

DURATION

DELAY

ITERATIONS

TIMING

CSS Animation

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

CSS Animation

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

Angular Animations

fadeIn

fadeOut

States & Transitions

TRANSITIONS

STATE

STATE

fadeIn => fadeOut

fadeOut => fadeIn

fadeIn <=> fadeOut

States & Transitions

void

*

Special Keywords

void => *           :enter

* => void          :leave

void <=> *

STATE

STATE

Animations Setup

// npm install --save @angular/animations
// app.module.ts

import {Component, NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@Component({ })
export class App { }

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule)

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

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'))
]);

Router Transitions

Router transitions

import { Component } from '@angular/core';
import { routerTransition } from './router.animations';

@Component({
  selector: 'home',
  template: `<h1>Home</h1>`,
  animations: [routerTransition()],
  host: {'[@routerTransition]': ''}
})
export class Home { }

Router transitions

import {trigger, state, animate, style, transition} from '@angular/animations';

export function routerTransition() {
  return slideToRight();
}

function slideToRight() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%'}) ),
    state('*', style({position:'fixed', width:'100%'}) ),
    transition(':enter', [
      style({transform: 'translateX(-100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
    ])
  ]);
}

Performance

Considerations

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

Saving Resources

.visible.advert {
  will-change: transform;
}

.visible.advert:hover {
  transform: scale(1.2);
}

Why use Animations?

Benefits

  • Improved UX ✨
  • Immersive interactions
  • Better engagement
  • User happiness 😃 

Thanks!

Animations Workshop (v4+)

By Gerard Sans | Axiom 🇬🇧

Animations Workshop (v4+)

How we can use Angular to achieve complex Animations. We will cover Web Animations API and how we can use Angular together with field-tested animation techniques providing examples for CSS transitions/animations and SVG. We will also study browser compatibility and performance to achieve reliable and silky smooth animations. Let's bring our Angular skills to the awesome world of animations!

  • 5,440

More from Gerard Sans | Axiom 🇬🇧