Cédric Soulas
I make motion graphics with RxJS. I code apps with JavaScript and Elm. I will be available for freelance work from mid-April 2018. Get in touch!

Ep. 28 Ep. 30 Newsletter Watch all Source on Github

Episode 29 - A stream of colors with Popmotion tween Monday, 2 Apr.

Popmotion is a “functional, reactive JavaScript motion library.” Today, I’ll show you the tween function from this library. It shares similarities with interval. Read Episode 16, about interval that returns a stream emitting incremental numbers, periodically:


Watch on reactive.how/interval

Popmotion Actions

A few months ago, Popmotion 8 introduced actions, a new building block in the library:

The concept of actions may sound familiar to you. “Think of it as an animation-focused, tiny alternative to Rx Observables”, we can read on Popmotion blog.

A stream of colors

Tween is one of the Popmotion functions that returns an action – a stream of values that can be started and stopped. This is how it works:

🎨 This function creates a stream of colors when from and to are colors!

Why 18 colored circles on the video?

Popmotion’s streams emit values at the same rate as the browser rendering performance. On my example:

60 fps x 0,3 seconds = 18 colors

A new episode every Monday


Episode 22 - scan vs. reduce

📮 You can subscribe to the mailing list to receive new episodes right inside your inbox. Or follow me on Twitter.

Ep. 28 Ep. 30 Newsletter Watch all Source on Github

reactive.how list of animated cards

Learn Reactive Programming

Focus on one new concept – every Monday

Occasional updates, plus:

Cédric Soulas
I make motion graphics with RxJS. I code apps with JavaScript and Elm. I will be available for freelance work from mid-April 2018.