<!DOCTYPE html>

<html>

<head>

<title>TweenJS: Relative Plugin Example</title>

<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>

<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>

<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>

<script src="../_assets/js/examples.js" type="text/javascript"></script>

<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>

<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>

<script type="text/javascript" src="../src/tweenjs/plugins/RelativePlugin.js"></script>

<!-- We also provide hosted minified versions of all CreateJS libraries.

http://code.createjs.com -->

<script id="editable">

function init() {

// set up our stage:

stage = new createjs.Stage("canvas1");

var circle = new createjs.Shape();

circle.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);

circle.x = 100;

circle.y = stage.canvas.height/2;

stage.addChild(circle);

// install the plugin:

createjs.RelativePlugin.install();

// set up a tween that tweens between scale 0.3 and 1 every second.

createjs.Tween.get(circle, {loop: -1, bounce:true})

.to({x:"+100"}, 1000) // move 100px to the right

.to({alpha:"-0.5", y:"-50"}, 1000); // fade out 50% and move 50px up

createjs.Ticker.timingMode = createjs.Ticker.RAF;

createjs.Ticker.addEventListener("tick", stage);

}

</script>

</head>

<body onload="init();">

<header class="TweenJS">

<h1>RelativePlugin Example</h1>

<p>This example demonstrates the RelativePlugin, which lets you specify relative values in a tween by using a string ("+200", "-50").</p>

</header>

<canvas id="canvas1" width="960" height="350"></canvas>

<br/>

<input type="button" value="toggle paused"

onclick="createjs.Ticker.paused = !createjs.Ticker.paused;">

</body>

</html>