tween progress of items on path

script.js

$(window).ready(function() {
		var quantity = 30, //number of dots
			duration = 3,  //duration (in seconds)
			path = [{x:100, y:0}, {x:200, y:100}, {x:100, y:200}, {x:0, y:100},{x:100, y:0}]; //points on the path (BezierPlugin will plot a Bezier through these). Adjust however you please.
			
			
        
        
        
        
  var tl = new TimelineMax({repeat:10, yoyo:true});       


		//we can remove the first point on the path because the position is already there and we want to draw the Bezier from there through the other points
		//path.shift();
for (i = 0; i < quantity; i++) {
		//create a new dot, add the .dot class, set the position, and add it to the body.	
		var	dot = $("<div />", {id:"dot"+i}).addClass("dot").appendTo("body"); 
    //create a tween for the dot that travels the full path of the bezier  
    var t = TweenMax.to(dot, duration, {bezier:{values:path, curviness:10}, paused:true, ease:Linear.easeNone});
    //tween the progress of the tween so that each dot only travels a decreasing percentage of the full path
    TweenLite.to(t, duration - (duration * i/quantity), {progress:1- i/quantity, ease:Linear.easeNone, delay:i*0.3});
		}
	});

style.css

body {
  background-color: black;
}
.dot{
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: #91e600;
	border-radius: 50%;
 top: 0;
  left: 300px;
}

tween-progress-of-items-on-path.markdown

tween progress of items on path

Forked from GreenSock's Pen Progressively reveal dots on a Bezier curve.

A Pen by Captain Anonymous on CodePen.

License.