Web Animations & State

on YouTube ↗27m

" summary

Shows that animations and instantaneous state diverge and gives three concrete strategies: skipping, queuing, and additive animation. Uses GreenSock timelines with an injected timeline manager and a wrapper service to orchestrate multi-component sequences, demoing a multi-select where items squash, move, and appear. Notes an Angular caveat: EventEmitter gets disposed before ngOnDestroy so a manual subscribe+complete hack is required. Demo and source are available via the provided bitly link.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 1:06Hi! I'm @gilfink
3. 1:55What is animation?
4. 2:17Frames over time
5. 8:19Angular list animation with state changes
6. 12:55Animation Timelines
7. 17:00Solution 2: Queuing
8. 18:06": Additive animation
9. 18:57Solution 3
10. 19:262.5 solutions
11. 20:29Angular implementation

" related talks

• 32mManaging animations (sanely) in (insanely) complex appsOpher Vishnia · YGLF 2019: Code Camp
• 30mState animations Getting them rightEduardo San Martin Morote · Vue.js Amsterdam 2018
• 39mThe Future of Web AnimationSarah Drasner · DinosaurJS 2019
• 26mAdvanced Angular AnimationsElad Bezalel · AngularUP 2019
• 26mAnimations (sequencer, web animations)Matias Niemelä · ng-europe 2014
• 35mManaging Animations (Sanely) in (Insanely) Complex AppsOpher Vishnia · ReactNext 2019
• 18mYet another way to animate in AngularDouglas Duteil · ng-europe 2014
• 55mAnimations in a World of StatesAlexey Taktarov · HolyJS 2017