title: Animating multiple items in Paper.js while anchored to a path
body: <p>I have five rectangles placed at different points along a circle like this - <a href="http://imgur.com/uVYkwl7" rel="nofollow">http://imgur.com/uVYkwl7</a>. </p>
  
  <p>Upon clicking any rectangle i want the circle to move to the left of the screen, gradually scaling down it's radius until the circle's center reaches x=0. I'd like the five rectangles to move along with the circle  while its being scaled down and also adjust their own positions and scale on the circle so that they are within the view's bounds, like this - <a href="http://imgur.com/acDG0Aw" rel="nofollow">http://imgur.com/acDG0Aw</a></p>
  
  <p>I'd appreciate any help on how to go about doing this. Heres my code for getting to the 1st image and animating the circle:</p>
  
  <pre><code>var radius = 300;
  var center = view.center;
  
  var circle = new Path.Circle({
    center: view.center,
    radius: radius,
    strokeColor: 'black',
    name: 'circle'
  });
  
  var path = new Path.Rectangle({
    size: [230, 100],
    fillColor: '#1565C0'
  });
  
  
  var rectText = ['Text 1',
    'Text 2',
    'Text 3',
    'Text 4',
    'Text 5'
  ];
  var symbol = new Symbol(path);
  
  var corners = [
    new Point(center.x, center.y - radius),
    new Point(center.x - radius, center.y - radius / 2),
    new Point(center.x + radius, center.y - radius / 2),
    new Point(center.x - radius, center.y + radius / 2),
    new Point(center.x + radius, center.y + radius / 2)
  ];
  
  var rectClicked = false;
  var clickedRect = null;
  
  var rectClick = function(event) {
    rectClicked = true;
    clickedRect = this;
  };
  
  function onFrame(event) {
    // Your animation code goes in here
    if (rectClicked) {
      for (var i = 0; i &lt; 1; i++) {
        var item = project.activeLayer.children[i];
        if (item.name == 'circle') {
          if (item.position.x &lt; 0) {
            rectClicked = false;
          } else {
            item.position.x -= 10;
            item.scale(1/1.01);
          }
        }
      }
    }
  }
  
  // Place the instances of the symbol:
  for (var i = 0; i &lt; corners.length; i++) {
    var placedSymbol = symbol.place(corners[i]);
    placedSymbol.onMouseDown = rectClick;
    var rText = new PointText({
      point: placedSymbol.bounds.topLeft + 20,
      content: rectText[i],
      fontSize: '20',
      fillColor: 'white'
    });
  }
  </code></pre>