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!

1/ original animation

2/my project failed animation

Are you getting any messages in the javascript console?

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

Hello, can i have your help…??

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.

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

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

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

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…!

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

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

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


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 …".

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.

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