Implementing Motion in Angular

slides.com/gerardsans |  @gerardsans

Google Developer Expert

Master of Ceremonies

Blogger

International Speaker

Spoken at 49 events in 17 countries

Angular Trainer

Community Leader

900

1K

Angular In Flip Flops

Animation Principles

Squash & Stretch + Anticipation

Follow through

Exaggeration

Composition

CSS Animations

DURATION

0%

100%

CSS Animations

KEYFRAMES

CSS Animation

NAME

animation:  fade  5s 1s infinite linear;

DURATION

DELAY

ITERATIONS

TIMING

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

timing function/easing

Animation Techniques

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

<div class="square base linear"></div>

.base {
  animation: spin 2s infinite;
}
.linear {
  animation-timing-function: linear;
}

@keyframes spin {
  to { 
    transform: rotate(1turn);
  }
}

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

<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 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

Execution Order

sequence

group

time

Composition

animateChild

time

Stagger

time

Dynamic Selectors

class="container"

class="item"

class="item"

query(selector)

Dynamic Selectors

query('.item')

class="container"

class="item"

class="item"

Dynamic Selectors

query('.item:enter')

class="container"

class="item"

class="item"

class="item"

added

Motion Design

 Principles

Easing

Offset Delay

Parenting

Binding Values

Overlay

Application

Applying

Motion

Why introduce motion?

Improved UX

Immersive interactions

Better engagement

User happiness 😃

More

Influencers

David Khourshid

Issara Willenskomer

Sarah Drasner

Rachel Nabors

Implementing Motion in Angular

By Gerard Sans

Implementing Motion in Angular

In this talk we are going to cover some of the 12 principles behind UX Motion giving practical examples. We will focus on these principles while covering some implementation details.

  • 1,820
Loading comments...

More from Gerard Sans