Repository files navigation

RxCSS is avery small library for manipulatingCSS Custom Properties (aka CSS Variables) withRxJS Observables.

More Info

• 📖 Read the slides:http://slides.com/davidkhourshid/reactanim#/
• 🎥 Watch the presentation:https://www.youtube.com/watch?v=lTCukb6Zn3g

Make sureRxJS is installed and globally available.

You can either use RxCSS in an existing project:

npm install rxcss@latest --save

Or you can include it directly in a<script> tag:

<scriptsrc="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.min.js"></script><scriptsrc="https://unpkg.com/rxcss@latest/dist/rxcss.min.js"></script>

constmouse$=Rx.Observable.fromEvent(document,'mousemove').map(({ clientX, clientY})=>({x:clientX,y:clientY}));conststyle$=RxCSS({mouse:mouse$,});// Optionalstyle$.subscribe(...);

:root {--mouse-x:0;--mouse-y:0;}.ball {transform:translateX(calc(var(--mouse-x)*1px))translateY(calc(var(--mouse-y)*1px));}

Sets each key/value pair, where each value is an observable, as a CSS variable on the target.

• observableMap(Object) - an object where each:
  • key is the CSS variable name to be set on thetarget
  • value is either an Observable stream of values, or a single value to set the CSS variable to.
• target(Element) - the DOM node to set the CSS variables to. Default:document.documentElement.