Animating using relative target coordinates with TweenMax.js
By Bartłomiej Bartel
An example of animating using relative target coordinates with TweenMax.js.
<!DOCTYPE html>
<html>
<head>
<script src="js/plugins/BezierPlugin.min.js"></script>
<script src="js/easing/EasePack.min.js"></script>
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="700" height="500"></canvas>
<script>
var context, canvas, myRectangle;
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#00f0f0';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function renderCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
}
myRectangle = {
x: 100,
y: 100,
width: 50,
height: 50,
borderWidth: 5
};
// Tweening with relative coordinates to the start position ---> x:"+=100", y:"+=100"
TweenMax.to(myRectangle, 2, {x:"+=100", y:"+=100", width:50, height:50, borderWidth: 5, onUpdate:renderCanvas });
</script>
</body>
</html>