Animation

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

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:

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

Animations are also triggered automatically when values change due to formula recalculation.

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);