Animate Components with Angular Motion

Animate Components

with Angular and Motion One

Seiji Villafranca

github.com/SeijiV13

seijivillafranca.com

Seiji Villafranca

github.com/SeijiV13

Senior Developer, Wypoon Technologies Netherlands

Microsoft MVP

Auth0 Ambassador

Community Lead, AngularPH,

Author

seijivillafranca.com

Talks

Animations

for better UX, can act as a response to user

calls attention of users

interactive and make applications more responsive

How do we animate?

CSS animations

@keyframes

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

How do we animate?

CSS animations

animation-name
animation-delay
animation-uration

And there's Angular

Yes CSS animations can be used but avoid them!

CSS animation chaining can be complex

CSS + SVG animation has a strange behavior

support for movements along a path not fully developed

Angular Animations

written in JavaScript

uses the concept of states

  state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
 state('closed', style({
        height: '100px',
        opacity: 0.8,
        backgroundColor: 'blue'
  })),

Angular Animations

Needed to use Angular Animations

@angular/animations

@angular/platform-browser

....
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

 animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.8,
        backgroundColor: 'blue'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
]),

Angular Animations

Kinda complex right?

We want a straightforward way!

Introducing Motion One

Motion One

smallest fully-featured animation library for the web.

HTML or SVG elements using the Web Animations API

It can animate anything by passing it a custom function, like innerText or Three.js.

"Hardware acceleration" means running animations outside the main JavaScript thread, usually on the GPU

Hardware Acceleration

Motion One

sample code

 animate(
      this.box?.nativeElement,
      {height: '100px', background: 'blue', opacity: 0.8},
      { duration: 1, easing: spring()}
  )

Hey I'm a Mentor!

github.com/SeijiV13

seijivillafranca.com

fb.com/seiji.villafranca

Thank you

and happy coding!