I made a fork of number-flow so that its number animations also work in older browsers. The first post covers an rAF fallback engine that preserves the original motion. The second post covers how the animation was reshaped so that it can run on the compositor thread, to reduce the style recalculation that remained even in modern browsers.
◆ SERIES · 2 POSTS
Improving number-flow
A record of forking number-flow to support older browsers and improving its animation performance in modern browsers.
README
02 ITEMS
All posts
in order
01
Porting number-flow to Old Browsers: Five Decisions and Two Reversals
The minimum versions where number-flow turns animations on are Chrome 125 and Safari 17.2. A record of the decisions made while building a fork that lowers this floor to Chrome 66 and WebKit 16.4, the two judgment calls I ended up reversing, and the Safari bug investigation that made me give up on automatic downgrading.
02
Improving number-flow Performance: Moving Animations onto the Compositor Thread
In the number-flow fork I built to support old browsers, animations in modern browsers were still recalculating styles on every frame. This post records how 0.2.0 moved additive compositing into transform and opacity keyframes, how the change was measured, and the costs that remain in the mask and in interruptions.