title: Fabric js stickman - animate limbs programatically and maintain joints between all circles and lines
body: <p><a href="https://i.stack.imgur.com/c6dBm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c6dBm.png" alt="Example of output"></a></p>
  
  <p>I'm currently developing a stickman with Fabric Js, which will be programatically controlled. As per the Fabric stickman demo, you can drag and drop the circles. However, when you try to do this programmatically with more than one circle at a time, the joints break - where the lines no longer follow the circles positioning. </p>
  
  <p>This is a segment of code, where I am looping through an object, to animate each limb. </p>
  
  <pre><code>let positionStateStore = {
      ARM_RAISE: {
          leftElbowCircle: {
              ref: 'leftElbowCircle',
              top: 152,
              left: 206
          },
          rightElbowCircle: {
              ref: 'rightElbowCircle',
              top: 158,
              left: 286
          },
          rightHandCircle: {
              ref: 'rightHandCircle',
              top: 110,
              left: 309
          },
          leftHandCircle: {
              ref: 'leftHandCircle',
              top: 111,
              left: 191
          }
      }
  }
  
  var _keys = ['leftElbowCircle', 'rightElbowCircle', 'rightHandCircle', 'leftHandCircle'];
  
  for (var i = 0; i &lt; _keys.length; i++) {
      var obj = positionStateStore.ARM_RAISE[_keys[i]];
      var ref = circles[_keys[i]];
      ref.animate('top', obj.top, {
          duration: 1000,
          onChange: function (){ animateObj(ref); },
          onComplete: function() {}
      });
  }
  </code></pre>
  
  <p>Does anyone know how I can ensure that these remain in sync? Thanks for any help you can give. </p>