title: How do you animate a line using EaselJS and TweenJS
body: <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>