[Drawing with TweenMax [SOLVED]]

I wanted to animate the line drawing between several points all at the same time. And, with a few tweaks of your above sample, I got it working I only had to comment out the graphics clear and change "progress" to the "currentProgress" property. Keeping the graphics clear would only draw one line instead of all the 40 points I wanted to connect at once.

 

I've included my solution if helps anyone else. In the below code, you can use drawConnection() in a loop to connect all the sprite dots you placed on the stage to whatever pattern you wish -- ie a spider web.

 

       private function buildPathTimeline($points:Array, $graphics:Graphics):TimelineLite 
	{
		   var timeline:TimelineLite = new TimelineLite();
		   var p:Point //point
		   var pPrev:Point = $points[0];
		   var prevPoints:Array = []; //keep track of the points that come before each point in the sequence
		   var dx:Number; //distance on the x-axis
		   var dy:Number; //distance on the y-axis
		   var d:Number; //distance
		   var pen:Object; //stores information about the coordinates and previous points for each one in the Array
		   for (var i:int = 1; i < $points.length; i++) {
		      p = $points[i];
		      pPrev = $points[i - 1];
		      prevPoints.push(pPrev);
		      pen = {x:pPrev.x, y:pPrev.y, prevPoints:prevPoints.slice()};
		      dx = p.x - pPrev.x;
		      dy = p.y - pPrev.y;
		      d = Math.sqrt(dx * dx + dy * dy);
		      timeline.append(new TweenLite(pen, d, {x:p.x, y:p.y, ease:Linear.easeNone, onUpdate:updateLine, onUpdateParams:[$graphics, pen]}));
		   }
		   return timeline;
		}

	private function updateLine($graphics:Graphics, $pen:Object):void 
	{
		  // $graphics.clear();
		   $graphics.lineStyle(5, 0xFFD700, 1, false, LineScaleMode.VERTICAL, CapsStyle.ROUND, JointStyle.ROUND, 10);
		   var points:Array = $pen.prevPoints;
		   $graphics.moveTo(points[0].x, points[0].y);
		   var l:uint = points.length;
		   for (var i:int = 1; i < l; i++) {
		      $graphics.lineTo(points[i].x, points[i].y);
		   }
		   $graphics.lineTo($pen.x, $pen.y);
		}

	private function drawConnection( fromDot:Sprite, toDot:Sprite):void
	{
		var point_from:Point = new point(fromDot.x, fromDot.y);
		var point_to:Point = new point(toDot.x, toDot.y);

		var myPath:TimelineLite = buildPathTimeline([ point_from, point_to], this.graphics);

		TweenLite.to(myPath, 0.5, {currentProgress:1}); //simply tween the progress property from 0 to 1 to draw the line.

	}