Kerry

Hi @mikel,

This is my first animated svg with js. Just wanted something fairly simple like https://www.quandl.com/#ember626 where the circles are representative of data flow in one direction to one source. The more random it appears the better (in a visual sense). So overtaking (circles) would be cool.

I may apply a pulse / opacity / scale effect through CSS but this would be static timing on each circle element.

@OSUblake thanks that is what I am after. Maybe just a little bit slower. Thanks again.

OK @OSUblake ,

Care to share the updates / fixes or any other suggestions to make this look amazing?

Just the last part to wrap up this thread is to randomise the speed of the circles something like https://www.quandl.com/#ember626

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.
 

Jack your observation was exact. I had thought the joined shapes would act as paths. Won't be doing that again.

I have adjusted the paths as you suggested (above in the codepen). Could still really use your help to reverse the direction to down from the top & reduce the amount of code required.

It looks like I am declaring the circles to start at the bottom with offsetY: 300,

The x positions of the top vertical parts of the paths are:
#path-1        122.5 px
#path-2        407.5 px

#path-3        692.5 px

#path-4        977.5 px

Thanks again for your help,

Kerry

I am trying to run multiple circles along multiple paths. I need some help with:

- Run animation in one direction (down). I adjusted the yoyo setting to false but it still reverses direction (up)

- Align the circles with the centre of each path. How are the x y offsets determined?

- Refactor script. Also do I need to have 4 circle paths?

- Any suggestions how this could be improved would be awesome. 

Inspiration taken from https://www.quandl.com/#ember620

See the Pen mqYzaW by Kerrys7777 (@Kerrys7777) on CodePen