title: React Leaflet.Arc - Animate
body: <p>I am trying create ReactLeafletArc Plugin with animation this is the code</p>
  
  <pre><code>if (!L) {
      throw "Leaflet.js not included";
  } else if (!arc || !arc.GreatCircle) {
      throw "arc.js not included";
  } else {
      L.Polyline.Arc = function (from, to, options) {
          from = L.latLng(from);
          to = L.latLng(to);
  
          var vertices = 10;
          var arcOptions = {};
          if (options) {
              if (options.offset) {
                  arcOptions.offset = options.offset;
                  delete options.offset;
              }
              if (options.vertices) {
                  vertices = options.vertices;
                  delete options.vertices;
              }
          }
  
          var generator = new arc.GreatCircle({ x: from.lng, y: from.lat }, { x: to.lng, y: to.lat });
  
          var line = generator.Arc(vertices, arcOptions);
          var latLngs = [];
  
          var newLine = L.polyline(line.geometries[0].coords.map(function (c) {
              return c.reverse();
          }), options);
  
          var totalLength = newLine._path.getTotalLength() * 4;
          newLine._path.classList.add('path-start');
          newLine._path.style.strokeDashoffset = totalLength;
          newLine._path.style.strokeDasharray = totalLength;
          setTimeout((function (path) {
              return function () {
                  path.style.strokeDashoffset = 0;
              };
          })(newLine._path), 200);
  
          return newLine;
      };
  }
  </code></pre>
  
  <p>I get error </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'getTotalLength' of undefined</p>
  </blockquote>
  
  <p>with console.log(newLine) i can see that there is not _path.</p>
  
  <pre><code>NewClass
  _bounds:L.LatLngBounds
  _initHooksCalled:true
  _latlngs:Array[100]
  options:Object
  __proto__:NewClass
  </code></pre>
  
  <p>But if i comment the part</p>
  
  <pre><code>var totalLength = newLine._path.getTotalLength() * 4;
      newLine._path.classList.add('path-start');
      newLine._path.style.strokeDashoffset = totalLength;
      newLine._path.style.strokeDasharray = totalLength;
      setTimeout((function (path) {
          return function () {
              path.style.strokeDashoffset = 0;
          };
      })(newLine._path), 200);
  </code></pre>
  
  <p>The line is created without animation and with console.log(newLine) i get this</p>
  
  <pre><code>NewClass
  _bounds:L.LatLngBounds
  _initHooksCalled:true
  _latlngs:Array[100]
  _leaflet_id:122
  _map:NewClass
  _mapToAdd:NewClass
  _parts:Array[1]
  _path:path
  _pxBounds:L.Bounds
  _renderer:NewClass
  _rings:Array[1]
  _zoomAnimated:true
  options:Object
  __proto__:NewClass
  </code></pre>
  
  <p>Any suggestion?</p>