Advanced Angular Animations
summary
Compares concrete techniques: CSS transitions and keyframes for cheap GPU-friendly effects, GSAP (GreenSock) for timeline choreography and the claim of ~7 million sites using it, and the Angular animation DSL with features that solve hard problems like measuring dynamic height via the asterisk height token. Shows code patterns: timelines, labels, timelineLite, query/stagger/animateChild, router-state-driven page transitions, and a React-built family-size picker that computes layout in JS but animates only transforms for smooth mobile performance.
AI-written summary · about
chapters (7)
- 0:00Intro
- 2:27CSS Transitions
- 5:31CSS Animations
- 8:15GSAP Example
- 13:53Angular issues with GSAP
- 17:17A 'simple' open-close animation
- 21:03Routing Animations
related talks
44mLively Applications with Angular Animations
32mThe Best of ngAnimate in AngularJS
28mAnimations, a tale of three frameworks
27mElegance of Movement with Reactive Angular Animations
45mImplementing Motion using Angular
21mDemystifying Angular Animation
18mYet another way to animate in Angular
24mMotion Makes Meaning