           translateX: [0, -500]
           opacity: 1
         ,
-          duration: 250
+          duration: self.desktopDuration.get()
           complete: (elements) ->
             $('html').addClass 'modal--opened'
       super
 
     else
       # just add background
-      $(node).appendTo(parent)
+      # $(node).appendTo(parent).css(bottom: 0)
 
       # slide in panel from bottom
-      $(node).children('.side-panel')
+      $(node).appendTo(parent).children('.side-panel')
+        .css
+          transform: "translateY(#{height}px)"
         .velocity
           translateY: [0, height]
           opacity: 1
         ,
-          duration: 250
+          duration: self.mobileDuration.get()
           complete: (elements) ->
             $('html').addClass 'modal--opened'
 
 
   removeDOMElement: (parent, node) ->
+    self = @
 
     width = $(window).width()
     height = $(window).height()

      null

  insertDOMElement: (parent, node, before) ->

    width = $(window).width()
    height = $(window).height()

    if width >= 767
      # fade in background
      $(node).appendTo(parent)
        .velocity "fadeIn",
          duration: 250

      # slide in panel from left
      $(node).children('.side-panel')

          translateY: height
          opacity: 1
        ,
          duration: self.mobileDuration.get()
          complete: (elements) ->
            $(node).remove()
            $('html').removeClass 'modal--opened'
