How do you animate a line using EaselJS and TweenJS
<p>My goal is to have a line <em><b>animate</b></em> from point A to point B using the Tween function.</p>

<p>The drawing library I am using is <a href="http://www.createjs.com/easeljs" rel="nofollow">EaselJS</a> and for Tweening I am using <a href="http://www.createjs.com/tweenjs" rel="nofollow">TweenJS</a>.</p>

<p>Is this possible using the moveTo function to <em><b>animate</b></em> a straight line from point A to point B?</p>

<hr>

<p>My current setup is as follows:</p>

<pre><code>var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
</code></pre>

<p>My goal is to animate this path from x100 y100 to x0 y0.</p>

<hr>

<h3>Animation Example:</h3>

<p>I have tried this using the following and nothing happens:</p>

<pre><code>var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
createjs.Tween.get(line).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);
</code></pre>

<blockquote>
  <p>Nothing happens.</p>
</blockquote>

<hr>

<h3>Draw Example:</h3>

<p>However if I use this I get the line as expected but it is not animated:</p>

<pre><code>var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
line.lineTo(0, 0);
</code></pre>

<blockquote>
  <p>This draws a line as expected.</p>
</blockquote>

<hr>

<p>Is there some way to use the lineTo method with the tweening method I am missing? I have checked the documentation of both Easel and TweenJS and can't find an example or any clear instructions on how to do this or if this is not possible.</p>

<p>Any help is appreciated.</p>