javascript - How to animate a line in canvas -

i trying animate line using canvas. want use timelinelite handle animation. how this? know in timelinelite, timelines this:

var timeline = new timelinelite(); timeline.to(target, duration, vars, position); 

the points exist in json file, , file correctly being brought in ajax. want line start @ points x1 & y1, keep x2, same value, , animate y2 position. want grow x1-y1 x2-y2.

js

function animatelines(name, stroke, width, x1, y1, x2, y2){     ctx.beginpath();     ctx.moveto(x1, y1);     ctx.linewidth = width;     ctx.strokestyle = stroke;     ctx.stroke;     console.log(x2); }  for(var = 0; < animated_lines.length; i++){     animatelines(animated_lines[i].name, animated_lines[i].stroke, animated_lines[i].width, animated_lines[i].x1, animated_lines[i].y1, animated_lines[i].x2, animated_lines[i].y2); } 

json

"animated_lines": [     {         "name": "test",         "stroke": "red",         "width": 3,         "x1": 0,         "y1": 0,         "x2": 0,         "y2": 50     } ] 

so question multi-part one. how go animating line using canvas? how animate line based on name in animateline() function?

timelinelite uses element transform targeted values of element.

you can watch update progress of transform using onupdate on time , animate line based on value.

timeline.eventcallback('onupdate',function(data){     var progress = this.progress();     // animation calls here! }); 

here working example code snippet

i transitioning canvas opacity during timeline , animating canvas.

var timeline = new timelinelite();  var maincanvas = document.getelementbyid("ctx");  var ctx = maincanvas.getcontext("2d");  var temp = document.createelement('div');    var animated_lines = [{    "name": "red",    "stroke": "#ff0000",    "width": 3,    "x1": 50,    "y1": 50,    "x2": 100,    "y2": 100  },{    "name": "green",    "stroke": "#00ff00",    "width": 2,    "x1": 50,    "y1": 20,    "x2": 100,    "y2": 100  }];    function createline(line, progress) {    ctx.linewidth = line.width;    ctx.strokestyle = line.stroke;    ctx.beginpath();    ctx.moveto(line.x1, line.y1);    ctx.lineto(line.x2, line.y2*progress);    ctx.stroke();  }     console.log('ctx', ctx);  timeline.from('#ctx', 10, { opacity: 0 });    timeline.eventcallback('onupdate',function(){    var progress = this.progress();    //console.log(progress);    ctx.clearrect ( 0 , 0 , maincanvas.width, maincanvas.height );    (var = 0; < animated_lines.length; i++) {      createline(animated_lines[i], progress);    }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/tweenmax.min.js"></script>  <canvas id="ctx" />