Thanks for the suggestion! This helped out a lot and helped minimize my code. I'm using the tweenTo function, but I'm having an issue.
My circle is set up fairly simply (I attached a new image to show the times). When the animation gets to the end, I can't get it to restart, and I'm not sure how to determine how much further to go. So, for example, if the circle at .75 needs to rotate to .125 in a clockwise rotation, it will go to it's completion at 1 second, and then stop. I've tried resume, restart, and some combination of seek/play in its onComplete function, but it won't restart for the beginning at 0 seconds. I've also tried setting repeat to -1 in the initialization of the timeline. I noticed in the API it says:
I'm wondering if that has anything to do with it, and if labels would be of more use than I realize. Either way, here's my updated code:
window.onload = function() {
timeline.pause();
for (var i = 1; i < 9; i++) {
var cir = document.getElementById('circle' + i);
cir.addEventListener('click', circleClick);
circleArr.push(cir);
var tempTimeline = new TimelineMax({
//repeat:-1,
onComplete:resetTimeline,
onCompleteParams:["{self}"]
});
tempTimeline.to( circleArr[i-1], .5, {
zIndex:0,
bezier:{
curviness:2,
values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ]
},
ease:Linear.easeInOut
} )
.to( circleArr[i-1], .5, {
zIndex:8,
bezier:{
curviness:2,
values:[ {left:100, top:50}, {left:125, top:75}, {left:100, top:100} ]
},
ease:Linear.easeInOut
} );
timeline.add(tempTimeline, 0);
}
moveCircles(0);
//timeline.play();
setTimeout( function() { moveCircles(-3); }, 1500);
}
function moveCircles(offset) {
var tempArr = timeline.getChildren();
for (i = 0; i < 8; i++)
tempArr[i*3].tweenTo(1.125 - .125 * (offset + i + 1));
}
function resetTimeline(tl) {
//tl.pause(0);
tl.seek(0);
//tl.play(.1);
//tl.restart();
//tl.play();
//tl.resume();
}