Raphael JS animating separate elements simultaneously

I am somewhat of a rookie with svg, but do understand enough to get myself into trouble. I am looking more for a high level solution to my problem rather than exact code. Basically I have the following design which needs to be an animated path:

I am a little unsure about how I should go about creating the path, orange and white circles along the path, orange connecting paths below each points, and then animating all simultaneously when the path is updated. I am using the Raphael JS library. I already know how to create paths, circles etc etc, but really feel I am lacking a high level understanding on how to connect them together via 1 animation.

Thanks!!

I think all you'd to to animate them is animate the elements' attributes to the new values

To animate paths, you'll have to work a bit harder and write a transformPath as seen in this answer

Update:

To animate them together in sync, raphael.js offers a animateWith method that accepts these arguments:

Parameters:

element - [object] element to sync with

anim - [object] animation to sync with

animation - [object] animation object, see Raphael.animation

Originally seen in this answer which also includes a fiddle