Advanced RxJS: State Management and Animations
summary
Covers concrete recipes using RxJS to drive animations with requestAnimationFrame and the RxJS animation frame scheduler, turning frames into elapsed milliseconds then into motion. Shows velocity (e.g. 50 px/s) and duration approaches (e.g. 300 px over 2s), builds a milliseconds elapsed observable, composes easing via tween/easing functions, and uses higher‑order functions plus let, mergeMap and concatMap to make animations reusable, sequenceable and testable.
AI-written summary · about
chapters (24)
- 0:00Intro
- 2:38Observable (Quick Version)
- 6:04Different methods of animation
- 7:25Animation (defined)
- 9:58requestAnimation Frame
- 11:15What is a Scheduler in Rx?
- 13:11RxJS 5 Schedulers
- 13:46Endless stream of frames for animations
- 17:01Velocity is very simple math
- 17:24Animate by velocity
- 18:01Animate by duration
- 20:10Higher-order function to provide scheduler
- 22:23Recap: Velocity-based Animations
- 24:30Build a duration observable
- 25:33Moving over a distance is simple multiplication
- 26:15Make distance a higher-order function
- 27:43Duration observables are always 0 to 1
- 28:55elasticOut ease function
- 29:46Add easing before distance is mapped!
- 30:13Making animations more reusable
- 34:14Recap: Duration based animations
- 35:02Animating state changes
- 36:09Using what we've built to "tween"
- 39:55Animations with RxJS
related talks
31m(React)ive State Management: Enter RxJS
30mThe Magic of RxJS
42mMake Your Frontend Reactive with RxJs
28mOperate Heavily Dynamic UI’s with Rxjs
35mRxJS destroy the state machine
46mRxJS: The Great and Terrible — Describing Asynchronous Logic Independently of the Stack
40mReactive Programming: A Better Way To Write Frontend Applications
22mA sleek view transitions recipe for web apps