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

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
  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) →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.