Elegance of Movement with reactive Angular Animations

on YouTube ↗25m

" summary

Live coding shows an Angular Animation Builder workflow that wires RxJS event streams to SVG and Angular Material components and produces concrete, runnable demos: a button with eyes and staggered hearts that responds to clicks, a spinner tied to a fake task service that visualizes progress, reusable SVG arrow step animations and a corrected dancing SVG ballerina. Source code is on GitHub and the examples use Animation Builder with query and stagger to control timing and players, and they run as shown.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 6:28UX CONCEPTS IN ANIMATIONS
3. 8:06EXAMPLES COOKBOOK
4. 10:26ANGULAR ANIMATIONBUILDER MODULE
5. 22:10ANIMATION BUILDER GOODIES

" related talks

• 27mElegance of Movement with Reactive Angular AnimationsElena Gancheva · AngularDay 2019
• 32mReactive Animations Using AngularGerard Sans · GDG DevFest Ukraine 2017
• 24mMotion Makes MeaningLukas Ruebbelke · AngularConnect 2017
• 18mYet another way to animate in AngularDouglas Duteil · ng-europe 2014
• 26mAdvanced Angular AnimationsElad Bezalel · AngularUP 2019
• 13mBringing Angular to Life with AnimationsZachary Ng · NG-MY 2019
• 44mLively Applications with Angular AnimationsTimo Korinth · International PHP Conference Spring 2018
• 29mReactive Web Animations with RxJSDavid Khourshid · Nordic.js 2017