Getting Reactive with CSS
summary
Combines CSS variables with reactive code to send a single numeric value from JS into CSS and drive layout, gradients, content and motion; implements touch panning with Hammer.js, physics rebounds with dynamics.js, and smooth interpolation via an RxJS observables pipeline; sets variables with element.style.setProperty, toggles a panning flag to switch transitions, and benchmarks setting a parent CSS var as faster than per-element inline styles — demos include a two‑hour hackathon “Tinder for goats” swipe that actually works.
AI-written summary · about
chapters (8)
- 0:00Start
- 11:33set the transition duration to 600 milliseconds
- 13:59set a css variable on a parent's container
- 14:36inspect via css variables
- 15:11create rich interactive user interfaces in an expressive declarative way
- 17:58implementing observables with rxjs
- 22:47using linear interpolation
- 26:18making a animation library using observables
related talks
31mReactive Animations with CSS Variables
29mReactive Web Animations with RxJS
31mRethinking Reactivity
40mReactive Programming: A Better Way To Write Frontend Applications
23mReactive Programming Made Simple
38mThe Future of Reusable CSS
47mCSS Rises from the Ashes: (Re)Make Friends with Your Stylesheet
43mCSS is Awesome!