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://cdn.rawgit.com/konvajs/konva/1.7.6/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>