web animation

frontend

typescript

react

framer

Visit Site

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.

Tooling around Keyframe Curves also lets us visualize transform density, 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 scroll density 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.