Implementing Motion using Angular
summary
Covers 12 UX motion principles and concrete Angular implementations: uses CSS keyframes for basics, then shows Angular Animations with the Web Animations API, uses AnimationBuilder to create runtime mouse-following animations, builds list add/remove with enter/leave transitions, composition, stagger and group sequencing, and a working demo that fixes removal glitches by calculating element height and tweaking margin. Recommends animating transform and opacity, times examples at 400 ms, and targets 60 fps (16.66 ms) while noting iOS/Safari frame limits.
AI-written summary · about
chapters (11)
- 0:00Introduction and speaker background
- 4:16Why add motion to apps
- 7:49Motion design principles
- 10:41CSS animations basics
- 18:10CSS animation techniques
- 22:27Angular animations overview
- 26:49Dynamic animations in Angular
- 30:06Applying motion design principles
- 32:14Animating list transitions
- 36:59Advanced Angular animation features
- 39:50Q&A session
related talks
44mLively Applications with Angular Animations
24mMotion Makes Meaning
32mReactive Animations Using Angular
21mDemystifying Angular Animation
27mElegance of Movement with Reactive Angular Animations
26mAdvanced Angular Animations
32mThe Best of ngAnimate in AngularJS
18mYet another way to animate in Angular