title: Drag a Famous surface and have it transition back to origin on mouseup?
body: <p>I want to drag a Famous surface, and have it return to its original position when I let go of it. I've taken the "Drag" example and modified it, but while the <code>mouseup</code> callback is triggering (I checked with <code>console.log</code>), the modifier transform is not. Here's the relevant code:</p>
  
  <pre><code>var surface = new Surface({
    size: [200, 200],
    content: 'drag',
    properties: {
      backgroundColor: 'rgba(200, 200, 200, 0.5)',
      lineHeight: '200px',
      textAlign: 'center',
      cursor: 'pointer'
    }
  });
  
  var draggable = new Draggable({
    xRange: [-220, 220],
    yRange: [-220, 220]
  });
  
  surface.pipe(draggable);
  
  var mod = new Modifier();
  
  var trans = {
    method: 'snap',
    period: 300,
    dampingRatio: 0.3,
    velocity: 0
  };
  
  surface.on('mouseup', function() {
    mod.setTransform(Transform.translate(0, 0, 0), trans);
  });
  
  mainContext.add(mod).add(draggable).add(surface);
  </code></pre>
  
  <p>Pretty sure it has to do with the order/way that I'm <code>add</code>-ing them to <code>mainContext</code> at the end, and the order in which events are triggering. What am I doing wrong/misunderstanding?</p>