How to make this javascript library (skylake) work with my phoenix project?

Questions / Help
, ,
1

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!

2

1/ original animation

2/my project failed animation

3

Are you getting any messages in the javascript console?

4

no nothing with console, even with console log…u can clone my repository to have a closer look!

5

Hello, can i have your help…??

6

Unfortunately I do not know anything about this library aside from what you have mentioned. If you are having an issue with it, it would probably be best to create a ticket in the repository you posted. I only asked about errors in the developer console as a means of simple debugging.

7

same problem I can’t solve it!
anyone experienced in javascript ?

8

Here is what I did but still nothing!
When your mouse entered the sag menu is opened && closed when your mouse left. I tried but nothing happened…

Any ideas? Thanks.

import S from 'skylake'

class HomeSticky {
  constructor() {
    S.BindMaker(this, ["menuOpen", "menuClose"])
  }

  init () {
    this.first = !1
    this.listeners("add")
  }

  listeners (opts) {
    S.Listen("#nav-link-submenu", opts, "mouseenter", this.menuOpen)
    S.Listen("#nav-link-submenu", opts, "mouseleave", this.menuClose)
  }

  menuOpen () {
    this.first = !0
    this.isOver = !0
    S.Geb.id("nav-container").className = "active"
    this.isOver && !this.isAnimated && this.open()

  }

  menuClose () {
    this.first && (this.isOver = !1, S.Geb.id("nav-container").className = "", this.isOver || this.isAnimated || this.close())
  }

  open () {
    function myCallback () {
      const morph2Animation = new S.Morph({
        type: 'path',
        element: '#nav-morph-path',
        start: 'M 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 L 0,0 Z',
        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',
        delay: 700,
        callback: (t) => {
            this.isAnimated = !1,
            this.isOver || this.close()
        }
      })
      morph2Animation.play()

    }
    _ => this
    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')
    const morph1Animation = new S.Morph({
      type: 'path',
      element: '#nav-morph-path',
      start: 'M 10,0 L 10,10 C 10,10 10,5 5,5 C 0,5 0,10 0,10 L 0,0 Z',
      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',
      delay: 700,
      callbackDelay: myCallback,
      callback: myCallback
    })
    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()
    morph1Animation.play()
    console.log(morph1Animation)
  }
  close () {
    function myCallback () {
      const morph4Animation = new S.Morph({
        type: 'path',
        element: '#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',
        delay: 700,
        callback: (t) => {
            this.isAnimated = !1,
            this.isOver || this.open()
        }
      })
      morph4Animation.play()
    }
    _ => this
    this.isAnimated = !0
    const navWrap = S.Geb.id("nav-wrap").className = ""
    const navMorphPath = 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")
    const morph3Animation = new S.Morph({
      type: 'path',
      element: '#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',
      delay: 700,
      callbackDelay: myCallback,
      callback: myCallback
    })
    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()
    morph3Animation.play()
  }

  destroy (opts) {
    this.listeners("remove"),
    this.morph1Animation && this.morph1Animation.pause()
    this.morph2Animation && this.morph2Animation.pause()
    this.morph3Animation && this.morph3Animation.pause()
    this.morph4Animation && this.morph4Animation.pause()
  }
}
export default HomeSticky
9

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:

1 Like
10

i aggree with you…:persevere: and yes I did it I used javascript debugger…but it sucks,
I don’t understand why…the action mouse enter & mouse leave doesn’t work…!

11

seems working now…§
I just add at the end of the class method before the export… :

let homesticky = new HomeSticky()
homesticky.init()

but in my console I got:
Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

and the menu animation is flicking

12

Uh, that one sounds like a library bug, it should never ever pass NaN’s to SVG, ever…

13

Hummm…maybe! aber ich bin nicht dafür…
when I did the js debug, I got:

Capture d’écran 2017-07-04 à 14.57.15.jpg1781×998 155 KB

I checked I the library code…but I don’t know how to parse it…/:persevere:

that’s why I got
Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

14

Ah yep, that is entirely an issue with the JS library you are using, might want to make a reproducible test-case and submit an issue to them as it is either an issue with internal parsing or a lack of error reporting on bad inputs.

15

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!

1 Like