SVG path d: I expected ('M' or 'm'), but got "NaN 0,0..100"

I used [skylake] library == svg morphing animation menu and wanted to do the same menu animation(svg morphing animation) like this one : http://jemimahbarnett.com . When your mouse entered the svg menu is opened && closed when your mouse left. I did it but in my chrome console I got: Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

how to solve it correctly?. There, is the morph.js instruction's file for the animation menu with svg path:

https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js

and here is how I used it in my project:

import S from 'skylake'

class HomeSvg {
  constructor() {
    S.BindMaker(this, ["menuOpen", "menuClose"])
  }
  init(t) {
    this.first = !1
    this.listeners("add")
  }
  listeners(t) {
    S.Listen("#nav-link-submenu", t, "mouseenter", this.menuOpen)
    S.Listen("#nav-link-submenu", t, "mouseleave", this.menuClose)
  }
  menuOpen(t) {
    this.first = !0
    this.isOver = !0
    S.Geb.id("nav-container").className = "active"
    this.isOver && !this.isAnimated && this.open()
  }
  menuClose(t) {
    this.first && (this.isOver = !1, S.Geb.id("nav-container").className = "", this.isOver || this.isAnimated || this.close())
  }
  open(t) {
    let i = this
    function s() {
      i.morph1Animation = new S.Morph({
        type: "path",
        element: S.Geb.id("nav-morph-path"),
        end: "M 0,0 L 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 Z",
        duration: 600,
        ease: "ExpoOut",
        callback: t => {
          i.isAnimated = !1
          i.isOver || i.close()
        }
      })
      i.morph1Animation.play()
    }
    this.isAnimated = !0
    S.Geb.id("nav-wrap").className = "active"
    S.Geb.id("nav-morph-path").setAttribute("d", "M 0,0 L 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 Z")
    this.morphAnimation = new S.Morph({
      type: "path",
      element: S.Geb.id("nav-morph-path"),
      end: "M 0,0 L 10,0 L 10,0 C 10,0 10,5 5,5 C 0,5 0,0 0,0 Z",
      duration: 300,
      ease: "Power3In",
      callback: s
    })
    const tl = new S.Timeline()
    tl.from("#nav-submenu-extend-bottom", "3dy", -200, 0)
    tl.from("#nav-submenu-extend-left", "3dy", -200, 0)
    tl.from(".nav-submenu-link-title", "3dy", -100, 0, 500, "Power4Out", {delay: 400})
    tl.from(".nav-submenu-link-no", "opacity", -100, 0, 500, "Power4Out", {delay: 50})
    tl.play()
    this.morphAnimation.play()
  }

  close(t) {
    let i = this
    function s() {
      i.morph3Animation = new S.Morph({
        type: "path",
        element: S.Geb.id("nav-morph-path"),
        end: "M 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 L 0,0 Z",
        duration: 600,
        ease: "ExpoOut",
        callback: t => {
          i.isAnimated = !1
          i.isOver && i.open()
        }
      })
      i.morph3Animation.play()
    }
    this.isAnimated = !0
    S.Geb.id("nav-wrap").className = ""
    S.Geb.id("nav-morph-path").setAttribute("d", "M 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 L 0,0 Z")
    this.morph2Animation = new S.Morph({
      type: "path",
      element: S.Geb.id("nav-morph-path"),
      end: "M 10,0 L 10,10 C 10,10 10,5 5,5 C 0,5 0,10 0,10 L 0,0 Z",
      duration: 300,
      ease: "Power3In",
      callback: s
    })
    const tl = new S.Timeline()
    tl.from("#nav-submenu-extend-left", "3dy", 0, -200)
    tl.from(".nav-submenu-link-title", "3dy", 0, -100, 160, "Power2In")
    tl.from(".nav-submenu-link-no", "3dy", 0, -100, 160, "Power2In")
    tl.from("#nav-submenu-extend-bottom", "3dy", 0, -200, {delay: 160})
    tl.play()
    this.morph2Animation.play()
  }

  destroy(t) {
    // console.log(homesticky.destroy)
    this.listeners("remove")
    this.morphAnimation && this.morphAnimation.pause()
    this.morph1Animation && this.morph1Animation.pause()
    this.morph2Animation && this.morph2Animation.pause()
    this.morph3Animation && this.morph3Animation.pause()
  }
}


let homesvg = new HomeSvg()
homesvg.init()
export default HomeSvg

I fixed it, the error was in the library code: https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js

where the getArrfunction(t) is located there is an implicit coercion that threats the string as a number:

S.Morph.prototype = {
  .............
  .............
  getArr: function(t) {
    for (var i = t.split(" "), e = [], s = 0; s < i.length; s++)
      for (var n = i[s].split(","), r = 0; r < n.length; r++) e.push(+n[r]); //this one causes the error
    return e
  },
  isLetter: function(t) {
    return "M" === t || "L" === t || "C" === t || "Z" === t
  },
  ...............
}

so e.push(+n[r]) becomes e.push(n[r]). In javascript it is possible to make the string a number, if possible (only with the characters 0-9 in the string). If that isn't possible, the result is NaN... In my case it tried to push a concatenation (with(+)) and expected an array (with method split()) of number but found a string that why I got the error: Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

Works well now!