PRO performance animation formula
Animation
Formula results animate smoothly when values change. Watch numbers and progress bars transition fluidly.
How it works
This demo shows ReoGrid's built-in animation engine in action. Edit any value in the Qty column (column C) and watch the Revenue, Cumulative, Achievement %, P&L %, and Sparkline cells transition smoothly to their new values.
- Animation is enabled globally with ws.setAnimation(true) — all cells that change value will animate
- The easing function (easeOutCubic) and duration (500ms) can be configured independently
- Progress bars and sparklines animate their visual state in sync with the underlying numeric value
- The formula engine recalculates dependent cells first; animation then interpolates the visual rendering from old to new value
- Toggle the "Animation On/Off" button to compare animated vs instant updates side-by-side
Key APIs used
ws.setAnimation(enabled) Enable or disable smooth value transition animations for all cells in the worksheet
ws.setAnimationDuration(ms) Set the animation duration in milliseconds (default: 300ms)
ws.setAnimationEasing(easing) Set the easing function: linear, easeIn, easeOut, easeInOut, easeOutCubic, etc.
ws.setCellType(row, col, options) Configure progress and sparkline cell types whose visuals animate in sync with numeric values
ws.setCellInput(row, col, value) Set a formula (= prefix) — formula result changes trigger animation on dependent cells
Source Code
TypeScript