title: Recreate the old windows solitaire winning animation in javascript
body: <p>I want to be able to take an element and move it along some arbitrary path while creating intermediate copies of the element to fill out the path. In the old Windows solitaire game, when you would win, you would see the kind of animation I'm interested in: <a href="https://www.youtube.com/watch?v=_hNwHdzRKXE" rel="nofollow">https://www.youtube.com/watch?v=_hNwHdzRKXE</a></p>
  
  <p>I can animate arbitrary paths (and I'm not particularly interested in the bouncing animation seen in the link above), but interpolating copies of the element has been tricky. I do have a solution using requestAnimationFrame and jQuery to clone the element and place that copy on each animation frame, but my main issue is that when the animation moves quickly, the space between each element copy becomes too large. I would like to keep a tight grouping regardless of the speed of the animation.</p>
  
  <p>my solution using jquery and <a href="https://github.com/sole/tween.js" rel="nofollow">tween.js</a> is here:</p>
  
  <pre><code>$(function () {
      animate();
  
      var top = parseInt($('#mark').css('top'));
      var left = parseInt($('#mark').css('left'));
      var tween = new TWEEN.Tween({x: 0, y: 0})
              .to({x: 200, y: 200}, 500)
              .easing(TWEEN.Easing.Elastic.InOut)
              .onUpdate(function () {
                  var mark = document.getElementById('mark');
                  mark.style.transform = 'translate(' + this.x + 'px, ' + this.y + 'px)';
  
                  var clone = $('#mark').clone().css({
                      transform: '',
                      position: 'absolute',
                      top: (top + this.y) + 'px',
                      left: (left + this.x) + 'px'
                  }).attr('id', 'mark-' + this.y + '-' + this.x);
                  $('#wrap').append(clone);
              })
              .start();
  
      function animate(time) {
          requestAnimationFrame(animate);
          TWEEN.update();
      }
  });
  </code></pre>
  
  <p>And a working demo is <a href="http://jsfiddle.net/hz49nrp9/11/" rel="nofollow">here</a>.</p>
  
  <p>I'm not particularly partial to any given library. I used what I did mostly out of familiarity, but I'm open to any workable solution. I'm also not overly familiar with SVG or canvas, but I would certainly be open to either of those as well.</p>