An Animated Intro to RxJS

In Reactive Animations with CSS Variables the subject of RxJS was touched. If you’re not familiar with RxJS, CSS-Tricks has nice introductory article on the subject:

You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you’re anything like me, you were completely bewildered when you first tried learning about it.

An Animated Intro to RxJS →

(via Freek)

Reactive Animations with CSS Variables

Despite its name, reactive animations have nothing to do with React, the framework/library/whatever it is. Rather, reactive animations can be described in terms of discrete changes caused by any number of events.

The overall idea is that JS captures multiple streams of events into a single stream, and emits those values over to CSS, where they are expressed as custom properties. By doing this, we can accomplish reactive styles.

The result is RxCSS, “a very small library for manipulating CSS Custom Properties (aka CSS Variables) with RxJS Observables”.

Not entirely familiar with CSS Variables? CSS Variables: var(–subtitle); is a good video/presentation to get you started.

Observing the scroll offset in an element could be coded as such:

// Observe scrolling in .content
const content = document
  .querySelector('.content');

const scroll$ = Rx.Observable
  .fromEvent(content, 'scroll')
  .map(({target}) =>
    2 * target.scrollTop / target.clientHeight);

// Couple the result of the `scroll$` observable to the `scroll` CSS Variable
RxCSS({
  scroll: scroll$,
});

In your CSS you can then use the scroll CSS Variable like one would normally do:

// Fade out background photo + scale it up when scrolling up one screen
.ui-bg-photo {
  opacity: calc(1 - var(--scroll));
  transform: scale(calc(1 + var(--scroll) / 3));
}

// Fade in the content when scrolling up
.ui-content {
  opacity: var(--scroll, 0);
}

The end result is this:

Reactive Animations with CSS Variables (Slides) →
Reactive Animations with CSS Variables (Video) →
RxCSS →