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
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.
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!
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
Freelance Developer Advocate. Motion graphics with code. JavaScript and Elm. cedricsoulas.com
Receive my latest news, product updates and programming visualizations. You can unsubscribe at any time.