2

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:

enter image description here

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!!

Brendan Moore
  • 193
  • 11

1 Answers1

0

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

Community
  • 1
  • 1
tutuDajuju
  • 10,307
  • 6
  • 65
  • 88
  • 1
    Thanks for the response, I was more hoping for a solution for how to animate the two TOGETHER. animating them separately is not a problem. My issue is that when animating the path, the circles along the path become "detached" even though I am animating them to the same values as the path get to. They are just separate entities and the animations do not run perfect together. Wanted to know if there was a way to do them more smoothly together. thanks – Brendan Moore Apr 09 '14 at 16:03