Getting very close now @Carl. Your refactoring looks sweet.
I tried tweaking your script attempting to make the speeds different for each circle but they seem to get stuck at the end (bottom) of each cycle (see pic).
var tl = new TimelineMax({repeat:-1});
$(".st0").each(function(index, element){
var circle = $("#circle-" + (index + 1));
TweenMax.set(circle, {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"});
var bezData = MorphSVGPlugin.pathDataToBezier(element, {align:circle}).reverse();
tl.to(circle, 3 + index, {
bezier: {
values:bezData, type:"cubic"
},
ease:Linear.easeNone}, 0)
})
If we can have the circles move at different speeds something like this updated codepen then it should be finished. Thanks again @Carl + Jack.