Animation

ReoGrid Web can animate numeric cell values smoothly when they change, including progress bars and other cell types.

Note: Animation is available in the Pro edition.

Enable via options

const grid = createReogrid({
  workspace: '#grid',
  animation: true,
  animationDuration: 500,
  animationEasing: 'easeOutCubic',
});

In React / Vue:

<Reogrid
  options={{
    animation: true,
    animationDuration: 500,
    animationEasing: 'easeOutCubic',
  }}
  style={{ flex: 1 }}
/>

Runtime enable / disable

const ws = grid.worksheet;

ws.setAnimation(true);
ws.setAnimation(false);

// Check state
ws.getAnimationEnabled(); // boolean

Configure duration and easing

Duration

ws.setAnimationDuration(300); // milliseconds

Easing

// Specify by preset name
ws.setAnimationEasing('easeOutCubic');

// Custom function
ws.setAnimationEasing((t) => t * (2 - t)); // easeOutQuad

Available easing names

How it works

When animation is enabled and a cell’s numeric value changes due to formula recalculation:

1. An interpolation animation starts from the old value to the new value
2. The value gradually changes according to the specified easing function
3. The Canvas is redrawn on each frame during the animation
4. Cell types such as progress bars also follow the numeric change

Automatic animation applies to dependent cells whose values change through formula recalculation. Directly edited cells do not animate — use animateCellValue() to animate them manually.

Manual animation

ws.animateCellValue(row, col, oldValue, newValue);

AnimationManager

const manager = ws.getAnimationManager();

Usage example: Real-time dashboard

const ws = grid.worksheet;
ws.setAnimation(true);
ws.setAnimationDuration(500);
ws.setAnimationEasing('easeOutCubic');

// Data with progress bar
ws.setCellType(1, 2, { type: 'progress', max: 100 });
ws.cell('C2').value = '=B2/A2*100';

// Updating the value causes the progress bar to animate smoothly
ws.cell('B2').value = '75';

// Periodic update
setInterval(() => {
  const newValue = Math.floor(Math.random() * 100);
  ws.cell('B2').value = String(newValue);
}, 3000);