Elastic Stars

Instructions: Drag and drop the stars and observe the elastic drop on dragend. Refresh the page to randomize the stars again.
Konva Elastic Stars Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Elastic Stars 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 tween = null;

      function addStar(layer, stage) {
        var scale = Math.random();

        var star = new Konva.Star({
          x: Math.random() * stage.width(),
          y: Math.random() * stage.height(),
          numPoints: 5,
          innerRadius: 30,
          outerRadius: 50,
          fill: '#89b717',
          opacity: 0.8,
          draggable: true,
          scale: {
            x: scale,
            y: scale,
          },
          rotation: Math.random() * 180,
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffset: {
            x: 5,
            y: 5,
          },
          shadowOpacity: 0.6,
          startScale: scale,
        });

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

      var layer = new Konva.Layer();
      var dragLayer = new Konva.Layer();

      for (var n = 0; n < 10; n++) {
        addStar(layer, stage);
      }

      stage.add(layer);
      stage.add(dragLayer);

      // bind stage handlers
      stage.on('mousedown', function (evt) {
        var shape = evt.target;
        shape.moveTo(dragLayer);
        // restart drag and drop in the new layer
        shape.startDrag();
      });

      stage.on('mouseup', function (evt) {
        var shape = evt.target;
        shape.moveTo(layer);
      });

      stage.on('dragstart', function (evt) {
        var shape = evt.target;
        if (tween) {
          tween.pause();
        }
        shape.setAttrs({
          shadowOffset: {
            x: 15,
            y: 15,
          },
          scale: {
            x: shape.getAttr('startScale') * 1.2,
            y: shape.getAttr('startScale') * 1.2,
          },
        });
      });

      stage.on('dragend', function (evt) {
        var shape = evt.target;

        tween = new Konva.Tween({
          node: shape,
          duration: 0.5,
          easing: Konva.Easings.ElasticEaseOut,
          scaleX: shape.getAttr('startScale'),
          scaleY: shape.getAttr('startScale'),
          shadowOffsetX: 5,
          shadowOffsetY: 5,
        });

        tween.play();
      });
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.