HTML5 Canvas Complex Tweening Tutorial

Also you can use GreenSock Konva Plugin for tweens.

GreenSock tweens are more powerfull than Konva’s tween.

Also demo demonstrate tweening fillLinearGradientColorStops property with usual GreenSock usage.

Konva Complex Tweening Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<script src="https://rawgit.com/konvajs/greensock-plugin/master/KonvaPlugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script src="https://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
<meta charset="utf-8" />
<title>Konva Complex Tweening 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 star = new Konva.Star({
x: 100,
y: 250,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'red',
});

layer.add(star);
stage.add(layer);

var tl = new TimelineLite();

// plugin example
tl.to(star, 2, {
konva: {
x: 300,
y: 130,
innerRadius: 15,
rotation: 360,
},
ease: Power4.easeOut,
})
.to(star, 2, {
konva: {
fill: 'rgb(0,0,255)',
scaleX: 1.5,
scaleY: 1.5,
},
})
.to(star, 1, {
konva: {
fill: '#0F0',
scaleX: 3,
scaleY: 1,
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowBlur: 10,
shadowColor: 'black',
rotation: 0,
},
});

var linearGradPentagon = new Konva.RegularPolygon({
x: 70,
y: 70,
sides: 5,
radius: 70,
fillLinearGradientStartPoint: {
x: -50,
y: -50,
},
fillLinearGradientEndPoint: {
x: 50,
y: 50,
},
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 4,
draggable: true,
});

layer.add(linearGradPentagon);
linearGradPentagon.moveToBottom();

//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);

//object to store color values
var tmpColors = {
color0: 'white',
color1: 'black',
};

//tween the color values in myObject
TweenLite.to(tmpColors, 5, {
colorProps: {
color0: 'black',
color1: 'red',
},
yoyo: true,
repeat: 5,
ease: Linear.easeNone,
onUpdate: applyProps,
});

//apply new color values to gradient css of target
function applyProps() {
linearGradPentagon.setAttrs({
fillLinearGradientColorStops: [
0,
tmpColors.color0,
1,
tmpColors.color1,
],
});
}
</script>
</body>
</html>
Enjoying Konva? Please consider to support the project.