More Easing Functions Tutorial

This tutorial demonstrates all of the easing function sets provided by Konva,
including Linear, Ease, Back, Elastic, Bounce, and Strong.

For all available easings go to Easings Documentation.

Instructions: Press “Play” to transition all of the text nodes.

More Easing Functions Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva All Easings Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      #buttons {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <input type="button" id="play" value="Play" />
      <input type="button" id="pause" value="Pause" />
      <input type="button" id="reverse" value="Reverse" />
    </div>
    <script>
      var width = window.innerWidth;
      var height = 707;

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

      var layer = new Konva.Layer();

      var easings = [
        { name: 'Linear', color: 'blue' },
        { name: 'EaseIn', color: 'green' },
        { name: 'EaseOut', color: 'green' },
        { name: 'EaseInOut', color: 'green' },
        { name: 'BackEaseIn', color: 'blue' },
        { name: 'BackEaseOut', color: 'blue' },
        { name: 'BackEaseInOut', color: 'blue' },
        { name: 'ElasticEaseIn', color: 'green' },
        { name: 'ElasticEaseOut', color: 'green' },
        { name: 'ElasticEaseInOut', color: 'green' },
        { name: 'BounceEaseIn', color: 'blue' },
        { name: 'BounceEaseOut', color: 'blue' },
        { name: 'BounceEaseInOut', color: 'blue' },
        { name: 'StrongEaseIn', color: 'green' },
        { name: 'StrongEaseOut', color: 'green' },
        { name: 'StrongEaseInOut', color: 'green' },
      ];

      var tweens = [];

      for (var n = 0; n < easings.length; n++) {
        var num = n + 1;
        var ease = easings[n];
        var text = new Konva.Text({
          x: 10,
          y: 60 + (n * 400) / easings.length,
          padding: 4,
          text: num + ') ' + ease.name,
          fontSize: 18,
          fontFamily: 'Calibri',
          fill: ease.color,
        });

        layer.add(text);

        // the tween has to be created after the node has been added to the layer
        var tween = new Konva.Tween({
          node: text,
          x: 280,
          easing: Konva.Easings[ease.name],
          duration: 2,
        });

        // add tween to tweens array
        tweens.push(tween);
      }

      stage.add(layer);

      // play
      document.getElementById('play').addEventListener(
        'click',
        function () {
          for (var n = 0; n < tweens.length; n++) {
            tweens[n].play();
          }
        },
        false
      );

      // pause
      document.getElementById('pause').addEventListener(
        'click',
        function () {
          for (var n = 0; n < tweens.length; n++) {
            tweens[n].pause();
          }
        },
        false
      );

      // reverse
      document.getElementById('reverse').addEventListener(
        'click',
        function () {
          for (var n = 0; n < tweens.length; n++) {
            tweens[n].reverse();
          }
        },
        false
      );
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.