 
 
   drawFrame:->
-    if @currentFrame+1>=@frames.length
+    if @currentFrame+1>=(@frames.length - @fadeOut)
       @currentFrame = 0
-    if @currentFrame<=@fadeOut or @currentFrame+@fadeOut == @frames.length
-      @ctx.globalAlpha = 0.5
-    else
-      @ctx.globalAlpha = 1
-    frame = @frames[@currentFrame++]
+    if @currentFrame<@fadeOut
+      lastFrame = @frames.length - 1
+      diff = @fadeOut - @currentFrame
+      index = lastFrame - diff
+      alpha = parseFloat( (diff / @fadeOut).toFixed(2) )
+    frame = @frames[@currentFrame]
+    @ctx.globalAlpha = 1
     @ctx.drawImage frame,0,0
+    if @currentFrame<@fadeOut
+      @ctx.globalAlpha = alpha
+      @ctx.drawImage @frames[index],0,0
+    @currentFrame++
+      
 
   animate:->
     if @playing

    @canvas = document.createElement 'canvas'
    width = @frames[0].naturalWidth
    height = @frames[0].naturalHeight
    @canvas.width = width
    @canvas.height = height
    width2 = width // 2

  animPath:''
  frames:[]
  currentFrame:0
  fadeOut:50


  constructor: (ytid) ->
