Reactive Animations with CSS Variables

on YouTube ↗31m

" summary

Shows how CSS variables and RxJS combine to push event streams into style values: using event observables, element.style.setProperty, and a tiny glue library RX CSS (about 1.56 KB on npm) to drive animations. Live demos include mouse, scroll and touch pan mapped to CSS, claims of smooth 60 FPS with far fewer DOM writes, reuse across CSS/Canvas/WebGL, and progressive enhancement where IE/Edge fallback remains necessary.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 17:36CSS VARIABLES RXJS OBSERVABLES
3. 22:07THINK OF RXJS AS LODASH FOR OBSERVABLES
4. 23:38ARE YOU THINKING WHAT I'M THINKING?
5. 23:52WHAT IF WE MODELED OBSERVABLE EVENTS AS CSS VARIABLES?
6. 24:03WHAT IF WE COULD WRITE JAVASCRIPT IN CSS?
7. 28:45WHY USE CSS VARIABLES?

" related talks

• 28mGetting Reactive with CSSDavid Khourshid · CSS Conf EU 2017
• 29mReactive Web Animations with RxJSDavid Khourshid · Nordic.js 2017
• 32mReactive Animations Using AngularGerard Sans · GDG DevFest Ukraine 2017
• 31mAnimating the Virtual DOMSarah Drasner · ReactEurope 2017
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 38mAdvanced animation with CSS in HTML and SVG to improve UXÁngel Corral · FrontFest 2017
• 23mMotion in ReactKaylie Alexa Kwon · React Alicante 2018
• 36mSmooth Animations for Web & HybridAlexander Blom · Web Unleashed 2017