Data Driven Styling

by Oleg Slobodskoi @oleg008

State Based Styling

User settings

API call

Time
etc.

Streaming Animations

🎏

Google Material Motion for JS

https://github.com/material-motion/material-motion-js

No Transitions
No Keyframes

😔

❌

Extreme Perf

60 FPS

JavaScript

One thread

😱

CSSOM FTW

🏎

Create CSS Rule

Update CSS Rule

JSS Function Values

Remove Overhead

🤓

Observables

Pointer events

Physics data

Streams coordination

JSS 9 Example

Observable + CSSOM = ❤️

Decoupled

Lazy

cssinjs.org/swinging-cat-rx

Thanks!

Data Driven Styling by Oleg Slobodskoi @oleg008

Made with Slides.com BESbswyBESbswyBESbswyBESbswy