Demystifying Angular Animation

on YouTube ↗21m

" summary

Shows how to use the Web Animation API (element.animate(keyframes, timing)) with a polyfill, then integrates it into Angular by importing @angular/animations (Angular 4.2) and wiring triggers, states and transitions. Demonstrates a custom component decorator that calls animate(), a small demo app with fade in/out and route transitions, and use of keyframes, animation groups and start/done event handlers. Builds work-in-progress demos that run in Chrome; Safari/Edge need the polyfill.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 2:53Web Animation Options
3. 7:02What Is a Decorator
4. 11:24Angular Animations
5. 13:36Phase Trigger
6. 17:20Angular Animation Demystified

" related talks

• 18mYet another way to animate in AngularDouglas Duteil · ng-europe 2014
• 32mThe Best of ngAnimate in AngularJSMatias Niemelä · GOTO Chicago 2014
• 17mAnimations in Angular 4.0.0Matias Niemelä · ng-conf 2017
• 44mLively Applications with Angular AnimationsTimo Korinth · International PHP Conference Spring 2018
• 45mImplementing Motion using AngularGerard Sans · BuzzJS 3.1 2018
• 26mAdvanced Angular AnimationsElad Bezalel · AngularUP 2019
• 38mNext Level UI Building Blocks With Angular2Matias Niemelä · Web Unleashed 2016
• 13mBringing Angular to Life with AnimationsZachary Ng · NG-MY 2019