My goal is to have a line animate from point A to point B using the Tween function.

The drawing library I am using is EaselJS and for Tweening I am using TweenJS.

Is this possible using the moveTo function to animate a straight line from point A to point B?

My current setup is as follows:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);

My goal is to animate this path from x100 y100 to x0 y0.

Animation Example:

I have tried this using the following and nothing happens:

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);

Nothing happens.

Draw Example:

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

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

This draws a line as expected.

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.

Any help is appreciated.

My goal is to have a line animate from point A to point B using the Tween function.

The drawing library I am using is EaselJS and for Tweening I am using TweenJS.

Is this possible using the moveTo function to animate a straight line from point A to point B?

My current setup is as follows:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);

My goal is to animate this path from x100 y100 to x0 y0.

Animation Example:

I have tried this using the following and nothing happens:

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);

Nothing happens.

Draw Example:

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

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

This draws a line as expected.

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.

Any help is appreciated.

• javascript
• canvas
• createjs
• easeljs
• tween.js

• I am afraid you may need to add a minimal reproducible example to your question to troubleshoot correctly, there is not enough code to find out why what you are doing does not work – blurfus Commented Jan 13, 2016 at 22:17
• @ochi I have updated the example with a more prehensive starting point this should help you understand what I'm trying to achieve. Please let me know if you feel something is missing. – Daniel Tate Commented Jan 13, 2016 at 22:44
• Looking at the API (createjs./docs/easeljs/classes/Graphics.html#method_lineTo) it indicates that before you use lineTo(x,y) you must call moveTo(x,y) - so it seems that move to is equivalent to lifting the pencil and moving the cursor to the given coords and then line to lowers the pencil and moves it to the given coords (effectively drawing the line as the pencil is now down, touching the canvas) – blurfus Commented Jan 13, 2016 at 22:57
• Hey @ochi Thanks for the update. Yes I have read the documentation and I understand that moveTo is needed before changing the position of the line. I have updated the examples again to show each case in full so it is more clear. I am in fact using moveTo in both examples to place the starting position of the line then in each case am using a different method to move the line. In the first I am attempting to use the Tween function to animate it ( and failing ) and in the second I am using the lineTo method and succeeding with no animation. – Daniel Tate Commented Jan 13, 2016 at 23:16
• I see, sorry it was not clear to me from the start – blurfus Commented Jan 13, 2016 at 23:32

2 Answers 2

The easiest approach is to use a Graphics mand. The .mand property returns the last created graphics mand, which you can then manipulate with a tween:

var cmd = line.graphics.lineTo(100,100).mand;
createjs.Tween.get(cmd).to({x:0}, 1000);

Here's a working example: https://jsfiddle/gskinner/17Lk8a9s/1/

Demo: http://jsfiddle/thpbr1vt/3/

Attention! Performance.

var stage = new createjs.Stage("canvas");
var vpoint = new createjs.Point( 100, 100);

var line = new createjs.Graphics();
line.beginStroke( 'cyan' );
line.moveTo( vpoint.x, vpoint.y );
var s = new createjs.Shape(line);
stage.addChild(s);

createjs.Tween.get(vpoint).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);

createjs.Ticker.addEventListener("tick", tick);
  function tick() { 
  line.lineTo( vpoint.x, vpoint.y );
  stage.update();
}