odyright
How to make this javascript library (skylake) work with my phoenix project?
Hello guys, I recently began to use phoenix framework && javascript, I’m new to these; now I want to build an awesome landing page including some goods “js” libraries. For inspiration, I threw a look on this design: jemimahbarnett.com it has a nice look with sag morph animation. But I’m facing errors when trying to achieve the same in phoenix with brunch.
-
Troubleshooting - i’m experiencing errors or exceptions and i need help in troubleshooting the issue.
the problem is that , I can’t realize the same svg morphing menu animation in my project.it uses svg morphing library :skylake for menu animation that’s what the developper of that website said to me.
I think the problem is with brunch.
i’ve done a github repository for that: phoenix-umbrella-landing-page
So if some of you can help me…I’ll be glad
Thanks!
Marked As Solved
odyright
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’s why I got the error: Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".
Works well now!
Also Liked
OvermindDL1
Have you debugged into it using Chrome’s/Firefox’s/Edge’s/Whatever’s javascript debugger? That is really what I’d have to do assuming you are accessing the right calls and so forth. Javascript sucks after all, but it does have fantastic debuggers. 







