How can I animate a progressive drawing of svg path?

Question

I want to animate a progressive drawing of a line using only css with svg/canvas and js maximum. An idea of the line I want to draw can be found here

Answer 1

Using Phrogz excellent technique I created a very basic GreenSock animation using TweenLite to tween the length value to getTotalLength() value.

As you can see in the demo, hooking this into a tween engine gives you tons of control and it involves very little code.

var orig = document.querySelector('path'), length, timer;

var obj = {length:0,
           pathLength:orig.getTotalLength()};

orig.style.stroke = '#f60';

var t = TweenMax.to(obj, 10, {length:obj.pathLength, onUpdate:drawLine, ease:Linear.easeNone})

function drawLine() {
  orig.style.strokeDasharray = [obj.length,obj.pathLength].join(' ');
  updateSlider();
}

Much respect to Phrogz for the awesome idea and code.

http://codepen.io/GreenSock/pen/zLiux