     else if e.type isnt 'mouseup'
       @hide true
 
-  animate: do ->
-    animation = null
-
-    nextFrame = ->
-      {start, duration, initialWidth, targetWidth} = animation
-      animation.rafHandle = requestAnimationFrame nextFrame.bind @
-      progress = (Date.now() - animation.start) / animation.duration
-      if 1 <= progress
-        progress = 1
-        cancelAnimationFrame animation.rafHandle
-        animation = null
-      @treeViewResizerEl.style.width = "#{initialWidth + (targetWidth - initialWidth) * progress}px"
-
-    (targetWidth) ->
-      if animation?.rafHandle?
-        cancelAnimationFrame animation.rafHandle
-      initialWidth = @treeViewResizerEl.clientWidth
-      start = Date.now()
-      duration = Math.abs (targetWidth - initialWidth) / (@conf.animationSpeed or Infinity)
-      rafHandle = requestAnimationFrame nextFrame.bind @
-      animation = {targetWidth, initialWidth, start, duration, rafHandle}
-
+  animate: (targetWidth, delay) ->
+    initialWidth = @treeViewEl.clientWidth
+    duration = Math.abs(targetWidth - initialWidth) / (@conf.animationSpeed or Infinity)
+    if @currentAnimation?
+      @currentAnimation.cancel()
+      @treeViewEl.style.width = "#{initialWidth}px"
+      delay = 0
+    @currentAnimation = @treeViewEl.animate [
+      {width: initialWidth}
+      {width: targetWidth}
+    ], {duration, delay}
+    @currentAnimation.onfinish = =>
+      @treeViewEl.style.width = "#{targetWidth}px"
+      @currentAnimation = null
 
   enableHoverEvents: =>
-    @treeViewResizerEl.classList.add 'autohide-hover'
+    @treeViewEl.classList.add 'autohide-hover'
 
   disableHoverEvents: =>
-    @treeViewResizerEl.classList.remove 'autohide-hover'
+    @treeViewEl.classList.remove 'autohide-hover'
 
 module.exports = new AutohideTreeView()
  deactivate: ->
    @disable()
    @disposables.dispose()
    {@treeView, @treeViewResizerEl, @treeViewEl} = {}

  subscribeEventHandlers: =>
    @disposables.add atom.config.observe 'autohide-tree-view', (@conf) =>


  enable: =>
    @enabled = true
    @treeViewEl.classList.add 'autohide'
    @hide(true)
    @update()

  disable: =>
    @enabled = false
    treeViewWidth = @treeViewEl.querySelector('.tree-view').clientWidth
    @treeViewEl.classList.remove 'autohide', 'autohide-hover'
    @treeViewEl.style.width = "#{treeViewWidth}px"
    @treeViewEl.parentNode?.style?.width = ''

  update: =>
    if @conf.pushEditor
      @treeViewEl.style.position = 'relative'
      @treeViewEl.parentNode?.style?.width = ''
    else
      @treeViewEl.style.position = 'absolute'
      @treeViewEl.parentNode?.style?.width = "#{@conf.hiddenWidth}px"

  show: (noDelay = false) ->
    targetWidth = @treeViewEl.querySelector('.tree-view').clientWidth
    delay = !noDelay * @conf.showDelay
    @animate targetWidth, delay
    @visible = true
    if @conf.focusTreeViewOnOpen
      @treeView.focus()

  hide: (noDelay = false) ->
    targetWidth = @conf.hiddenWidth
    delay = !noDelay * @conf.hideDelay
    @animate targetWidth, delay
    @visible = false
    @enableHoverEvents()
    if @conf.unfocusTreeViewOnClose
      @treeView.unfocus()

  toggle: =>
    if @enabled
      @disableHoverEvents()
      if @visible then @hide true else @show true
    else
      atom.commands.dispatch atom.views.getView(atom.workspace), 'tree-view:toggle'

  openEntry: (e) =>
    if @treeView.selectedEntry().classList.contains 'directory'
