           reg=///^[0-9]+\.jpg$///
           files.sort (a,b)->
             parseInt(reg.exec(a))-parseInt(reg.exec(b))
+          @frames = files.length
           @addFrame file for file in files
+          @filesLoaded()
     catch e
       console.log e
 
 
   drawFrame:(index)->
     if index? then @currentFrame = index
-    if @currentFrame+1>=@frames.length
+    if @currentFrame+1>=@frames
       @currentFrame = 0
-    if @currentFrame<=@fadeOut or @currentFrame+@fadeOut == @frames.length
-      @ctx.globalAlpha = 0.5
-    else
-      @ctx.globalAlpha = 1
-    frame = @frames[@currentFrame++]
-    @ctx.drawImage frame,0,0
+    top = -(@currentFrame*@height)
+    @animation.style.top=top+'px'
+    @currentFrame++
 
   animate:->
     if @playing


  imageLoaded:(file,event)->
    @loaded++
    if @loaded == @frames.length
      @createCanvas()
      @playing = true
      @animate()



  addFrame:(file)->
    img = new Image()
    img.addEventListener 'load',(event)=>
      @imageLoaded.apply @,[file,event]
    img.src = @animPath+file
    @frames.push img

  start:(element,before)->
    @frames = []
    @element = element
    @before = before
    try
      fs.readdir @animPath,(err,files)=>
        if err then console.log err

        @animate()
      , @speed

  stop:->
    @canvas.remove()
    @frames = []
