title: Tween transition in Kinetic js
body: <p>I've been using the old 'transitionTo()' in my program but since Kineticjs is using Tween, i am a bit lost.</p>
  <p>I've tried a <a href="http://jsfiddle.net/RgMXa/" rel="nofollow noreferrer">simple shape transition</a> using Tween and i've got some issues:</p>
  <ol>
  <li><p>If you drag the shape to another point before doing anything, then click on the button for the transition, the shape comes back to the original hard coded coordinates and then does the transition.</p>
  <p>I want the shape to start the transition where it has been dropped.</p>
  </li>
  </ol>
  <p>2.The 1st time it will do the transition, but afterwards it won't take the whole duration. It will just shift to the end point of the transition, like mentioned <a href="https://stackoverflow.com/questions/16770379/kineticjs-and-tween-timelines-integrating-with-gsap-js?answertab=active#tab-top">here</a>.</p>
  <p>Some codes:</p>
  <pre><code>var rect = new Kinetic.Rect({
      x: 100,
      y: 100,
      width: 100,
      height: 50,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 2,
      draggable: true
    });
    
    layer.add(rect);
    stage.add(layer);
   
   
   var tween = new Kinetic.Tween({
          node: rect,
          x: 200,
          y: 200,
          rotation: 0,
          duration:5
  });
      
  </code></pre>
  <p>jsFiddle provided above.</p>
  <p>Any help will be appreciated; thanx :)</p>