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.