Reactive Animations Using Angular
summary
Shows how Angular captures multiple event streams and maps them to runtime animations using animation builder to create players on the fly and RxJS fromEvent to stream mouse/scroll/keyboard positions. Demonstrates a follow-the-mouse element and a staggered list (with and without animations) so you see the UX difference, explains Web Animations API, states/transitions, query/stagger/animateChild, and gives performance rules (use transform/opacity, will-change, avoid reflows).
AI-written summary · about
chapters (40)
- 0:00Introduction
- 1:21Graph Quell
- 1:54London
- 2:32Angular Cruise
- 3:43Angular Party
- 4:08Why use animations
- 4:43Improve user experience
- 5:17Improve perceived performance
- 5:35Apple TV
- 6:04Bootstrapping
- 6:38User Happiness
- 6:59Principles of Animation
- 7:17Illusion of Life
- 7:39Squash and Stretch
- 8:30Follow Through
- 8:54Exaggeration
- 9:18Composition
- 9:41Animation Techniques
- 11:08Animation Code
- 12:38Rotation Code
- 13:26Resize Code
- 14:24Advanced Techniques
- 16:20Overlay
- 16:37CSS
- 17:17Angular Basics
- 17:49Special Estates
- 18:39Fade In Fade Out
- 20:03Animation Definition
- 21:03Unit Tests
- 21:42Animation Child
- 22:18Stagger
- 22:52Query
- 23:16CSS Selector
- 23:37Demo
- 25:09Reactive animations
- 25:40Technologies
- 26:42Demonstration
- 27:51Animation Builder
- 28:51Tracking Positions
- 31:52Inspiration
related talks
27mElegance of Movement with Reactive Angular Animations
25mElegance of Movement with reactive Angular Animations
45mImplementing Motion using Angular
24mMotion Makes Meaning
18mYet another way to animate in Angular
44mLively Applications with Angular Animations
29mReactive Web Animations with RxJS
26mAdvanced Angular Animations