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:

• they are streams of values,
• that can be started and stopped.

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:

• it accepts two values, from and to, and an optional duration (300ms by default)
• on start, it emits values between from and to, over that duration.

🎨 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:

• the browser renders animations at 60 frames per second (fps).
• the animation duration is 300ms.

60 fps x 0,3 seconds = 18 colors