odyright

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

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

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. :slight_smile:

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
pgiesin
This should be a simple problem but I just can’t seem to figure it out. I have a standalone Elixir app that won’t find the database. Dep...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
977 41022 311
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

We're in Beta

About us Mission Statement