How do we convert a motion value like scroll percentage into a predictable and reliable set of pre-defined animation values? How do we smoothly interpolate motion and alter the rate of animations relative to their progress? The answer is curve editors.

Keyframe Curve Interactive Demo

Tooling around Keyframe Curves also lets us visualize 

, or how compressed the input space is over the output space. For instance, if our function maps values from 0->0.1 in to 0->0.9 out, and our input value is scroll percentage, the 

 would be highest at the first 10% of the page. This would result in the majority of the animation to occur quickly during the first 10% of scrolling, then tapering off to slowly progress through the remaining.

Understanding how we can use transforms to harness the power of these sample densities, we can control how the page reacts to interaction in a powerful way.

Library on NPM

Production Usage Demo

A blog post discussing the animation system on bcsculpture, and the reactive animations framework of TBSUI.