diff --git a/lib/torque/leaflet/canvas_layer.js b/lib/torque/leaflet/canvas_layer.js
index d443ada..f0889ad 100644
--- a/lib/torque/leaflet/canvas_layer.js
+++ b/lib/torque/leaflet/canvas_layer.js
@@ -28,6 +28,8 @@ L.CanvasLayer = L.Class.extend({
     this.render = this.render.bind(this);
     L.Util.setOptions(this, options);
     this._canvas = this._createCanvas();
+    // backCanvas for zoom animation
+    this._backCanvas = this._createCanvas();
     this._ctx = this._canvas.getContext('2d');
     var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                 window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
@@ -51,15 +53,21 @@ L.CanvasLayer = L.Class.extend({
 
   onAdd: function (map) {
     this._map = map;
+
+    // add container with the canvas to the tile pane
+    // the container is moved in the oposite direction of the 
+    // map pane to keep the canvas always in (0, 0)
     var tilePane = this._map._panes.tilePane;
-
     var _container = L.DomUtil.create('div', 'leaflet-layer');
-
     _container.appendChild(this._canvas);
+    _container.appendChild(this._backCanvas);
+    this._backCanvas.style.display = 'none';
     tilePane.appendChild(_container);
 
     this._container = _container;
 
+    // hack: listen to predrag event launched by dragging to
+    // set container in position (0, 0) in screen coordinates
     map.dragging._draggable.on('predrag', function() {
       var d = map.dragging._draggable;
       L.DomUtil.setPosition(this._canvas, { x: -d._newPos.x, y: -d._newPos.y });
@@ -69,8 +77,8 @@ L.CanvasLayer = L.Class.extend({
     map.on('move', this.render, this);
     map.on('resize', this._reset, this);
     map.on({
-        'zoomanim': this._animateZoom,
-        'zoomend': this._endZoomAnim
+        'zoomanim': this._animateZoom,
+        'zoomend': this._endZoomAnim
     }, this);
 
     if(this.options.tileLoader) {
@@ -84,17 +92,18 @@ L.CanvasLayer = L.Class.extend({
       if (!this._animating) {
           this._animating = true;
       }
+      var back = this._backCanvas;
 
-      var back = this._createCanvas();
       back.width = this._canvas.width;
       back.height = this._canvas.height;
+
       // paint current canvas in back canvas with trasnformation
       var pos = this._canvas._leaflet_pos || { x: 0, y: 0 };
-      //back.getContext('2d').drawImage(this._canvas, -pos.x, -pos.y);
       back.getContext('2d').drawImage(this._canvas, 0, 0);
-      // hide
-      this._container.appendChild(back);
-      this._canvas.style.visibility = 'hidden';
+
+      // hide original
+      this._canvas.style.display = 'none';
+      back.style.display = 'block';
 
 
       var bg = back,
@@ -104,9 +113,10 @@ L.CanvasLayer = L.Class.extend({
 
       //scaleStr = ' scale(' + e.scale + ') ';
       bg.style[transform] = scaleStr;
-        bg.style[transform] = e.backwards ?
+        /*bg.style[transform] = e.backwards ?
                 scaleStr + ' ' + initialTransform :
                 initialTransform + ' ' + scaleStr;
+                */
   },
 
   _endZoomAnim: function () {
@@ -127,13 +137,13 @@ L.CanvasLayer = L.Class.extend({
   },
 
   onRemove: function (map) {
-    this._container.parentNode.removeChild(this._container);
+    this._container.parentNode.removeChild(this._container);
     map.off({
       'viewreset': this._reset,
       'move': this._render,
-      'resize': this._reset
-      //'zoomanim': this._animateZoom,
-      //'zoomend': this._endZoomAnim
+      'resize': this._reset,
+      'zoomanim': this._animateZoom,
+      'zoomend': this._endZoomAnim
     }, this);
   },