How to animate canvas shapes with React and Konva?

Konva itself has two methods for animations: Tween and Animation. You can apply both of them to nodes manually.

For simple use cases we recommend using the node.to() method. For more complex animations take a look at the Complex react-konva animation demo.

The demo is using the refs API to access shape instances directly.

Instructions: Try to drag the rectangle to see it animate.

import React, { useRef } from 'react';
import { Stage, Layer, Rect } from 'react-konva';

const MyRect = () => {
  const rectRef = useRef(null);

  const changeSize = () => {
    // to() is a method of `Konva.Node` instances
    rectRef.current.to({
      scaleX: Math.random() + 0.8,
      scaleY: Math.random() + 0.8,
      duration: 0.2,
    });
  };

  return (
    <Rect
      ref={rectRef}
      width={50}
      height={50}
      fill="green"
      draggable
      onDragEnd={changeSize}
      onDragStart={changeSize}
    />
  );
};

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <MyRect />
      </Layer>
    </Stage>
  );
};

export default App;