Co-building and maintaining animations over time, with Rx.js and CSS variables

In early 2017, I stumbled upon (undoubtedly with a little late) the fabulous work of David Khourshid on CSS animation. Among other experiments, he presented the fantastic idea of combining RX.js with CSS variables to create CSS reactive animations.

Already a big fan of the CSS custom properties, I finally took the time to also investigate a little the reactive programming I was often talked about. Its interest can be indeed really relevant for css animations since this approach offers a different layer of abstraction that can makes them simpler, and can bring in some case a better performance.

Particularly interested by the design system and the “future-friendly” methods, I found in this idea a possibility to foster a better team collaboration for crafting UI animations and, above all, a mean to improve their maintenance.

I took the time to make a talk to my teammates at Startup Palace to present them this idea of combining observables with CSS variables, and to introduce a bit the work of David Khourshid, but also of Ben Lesh and André Staltz.

Here are the slides I made to help me in this presentation. They can also be viewed directly at thibault.mahe.io/talks/reactive-css-animations.