title: HTML5 Canvas Simple Easings Tutorial

To create a non linear easing tween with Konva, we can set the easing
property to an easing function. Other than Konva.Easings.Linear,
the other most common easings are Konva.Easings.EaseIn,
Konva.Easings.EaseInOut, and Konva.Easings.EaseOut.

For all available easings go to Easings Documentation.

Instructions: Mouseover or touchstart the boxes to tween them with different easing functions

Konva Simple Easings Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Common Easing Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();

      var greenBox = new Konva.Rect({
        x: 70,
        y: stage.height() / 2,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        offset: {
          x: 50,
          y: 25,
        },
      });

      var blueBox = new Konva.Rect({
        x: 190,
        y: stage.height() / 2,
        width: 100,
        height: 50,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 4,
        offset: {
          x: 50,
          y: 25,
        },
      });

      var redBox = new Konva.Rect({
        x: 310,
        y: stage.height() / 2,
        width: 100,
        height: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        offset: {
          x: 50,
          y: 25,
        },
      });

      layer.add(greenBox);
      layer.add(blueBox);
      layer.add(redBox);
      stage.add(layer);

      // the tween has to be created after the node has been added to the layer
      greenBox.tween = new Konva.Tween({
        node: greenBox,
        scaleX: 2,
        scaleY: 1.5,
        easing: Konva.Easings.EaseIn,
        duration: 1,
      });

      blueBox.tween = new Konva.Tween({
        node: blueBox,
        scaleX: 2,
        scaleY: 1.5,
        easing: Konva.Easings.EaseInOut,
        duration: 1,
      });

      redBox.tween = new Konva.Tween({
        node: redBox,
        scaleX: 2,
        scaleY: 1.5,
        easing: Konva.Easings.EaseOut,
        duration: 1,
      });

      // use event delegation
      layer.on('mouseover touchstart', function (evt) {
        evt.target.tween.play();
      });

      layer.on('mouseout touchend', function (evt) {
        evt.target.tween.reverse();
      });
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.