title: Trying to animate airplane on SVG path
body: <p>I'm starting to learn SVG, and I came across a codepen that I wanted to modify - it originally had a triangle that went along the animated SVG path. I managed to remove the middle loop, and replace the triangle with an actual image. However, if you take a look at my pen (<a href="http://codepen.io/hybride/pen/pewzrO" rel="nofollow noreferrer">http://codepen.io/hybride/pen/pewzrO</a>), you will see that the image does not actually smoothly/correctly goes along the animated path. How can I </p>
  
  <ol>
  <li>get the image on the path, </li>
  <li>have the image plane follow the path in that direction, as opposed to this weird squiggle thing the plane is now doing? </li>
  </ol>
  
  <p>Thanks!</p>
  
  <p>Also code provided:
  HTML</p>
  
  <pre><code>&lt;div id="svg-container"&gt;
   &lt;svg id="svgC" width="100%" height="100%" viewBox="0 0 820 220" preserveAspectRatio="xMidYMid meet"&gt;&lt;/svg&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>#svg-container {
  position:absolute;
  z-index:99;
  width: 90%;
  margin: 0 auto;}
  
  #svgC {padding: 20px;}
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>    // Pen JS Starts Here
  jQuery(document).ready(function(){
  
    // ---------
    // SVG 
    var snapC = Snap("#svgC"); 
  
    // SVG C - "Squiggly" Path
   var myPathC = snapC.path("M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 14.9c-25-7.74-56.6 14.9c-25-7.74-56.6 4.8-60.4").attr({
  
      id: "squiggle",
      fill: "none",
      strokeWidth: "4",
      stroke: "#ffffff",
      strokeMiterLimit: "10",
      strokeDasharray: "12 6",
      strokeDashOffset: "180"
    });
  
    // SVG C - Triangle (As Polyline)
     var Triangle = snapC.image("https://stage.livetext.com/wp-content/uploads/2017/02/Paper_Plane_Shadow.png", 0, 0, 150, 150);
  
    initTriangle();
  
    // Initialize Triangle on Path
    function initTriangle(){
      var triangleGroup = snapC.g( Triangle ); // Group polyline 
      movePoint = myPathC.getPointAtLength(length);
      triangleGroup.transform( 't' + parseInt(movePoint.x - 15) + ',' + parseInt( movePoint.y - 15) + 'r' + (movePoint.alpha - 90));
    }
  
    // SVG C - Draw Path
    var lenC = myPathC.getTotalLength();
  
    // SVG C - Animate Path
    function animateSVG() {
  
      myPathC.attr({
        stroke: '#fff',
        strokeWidth: 4,
        fill: 'none',
        // Draw Path
        "stroke-dasharray": "12 6",
        "stroke-dashoffset": "180"
      }).animate({"stroke-dashoffset": 10}, 4500,mina.easeinout);
  
      var triangleGroup = snapC.g( Triangle ); // Group polyline
  
      setTimeout( function() {
        Snap.animate(0, lenC, function( value ) {
  
          movePoint = myPathC.getPointAtLength( value );
  
          triangleGroup.transform( 't' + parseInt(movePoint.x - 15) + ',' + parseInt( movePoint.y - 15) + 'r' + (movePoint.alpha - 90));
  
        }, 4500,mina.easeinout, function(){
          alertEnd();
        });
      });
  
    } 
  
    // Animate Button
    function kapow(){
      $("#nin").click(function(event){
  
        // Disable Button
        $(this).attr('disabled','disabled');    
        // Animate Ball
        if ($('#ball').hasClass('red')){
          $('#ball').removeClass('red');
        }    
        // Run SVG
        animateSVG();
  
      });
    }
  
    kapow();
  
  });
  </code></pre>