A stream of colors with Popmotion tween

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

CĂ©dric Soulas Follow Hire me

Freelance Developer Advocate. Motion graphics with code. JavaScript and Elm. cedricsoulas.com

Subscribe to reactive.how newsletter

Join the Newsletter

Learn Reactive Programming and stay up-to-date:

Receive my latest news, product updates and programming visualizations. You can unsubscribe at any time.

Highlights

@CedricSoulas

Making an illustrated book!

The Illustrated Book of RxJS

Learn more →