diff --git a/player/index.html b/player/index.html
index 07db12b..19bb60c 100644
--- a/player/index.html
+++ b/player/index.html
@@ -40,6 +40,6 @@
 </head>
 <body style="background-color:#666; margin: 10px;height: 100%; font-family: sans-serif;font-size: 10px">
 <div id="loader"></div>
-<div style="width:510px;height:676px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/mcangel" data-bm-player="0" data-anim-type="svg" data-anim-loop="true"></div>
+<div style="width:510px;height:676px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/mcangel" data-bm-player="0" data-anim-type="canvas" data-anim-loop="true"></div>
 </body>
 </html>
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 4bb6b11..1e0491d 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -20,6 +20,7 @@
     this.isScrolling = false;
     this.loop = true;
     this.renderer = null;
+    this.animationID = randomString(10);
 };
 
 AnimationItem.prototype.setData = function (wrapper) {
@@ -60,12 +61,14 @@
 
     this.effectsManager = new EffectsManager();
     this.animationData = animData;
+    this.animationData._id = this.animationID;
+    this.animationData._animType = this.animType;
     this.layers = this.animationData.animation.layers;
     this.assets = this.animationData.assets;
     this.totalFrames = this.animationData.animation.totalFrames;
     this.frameRate = this.animationData.animation.frameRate;
     this.frameMult = this.animationData.animation.frameRate / 1000;
-    dataManager.completeData(this.layers, this.frameRate);
+    dataManager.completeData(this.animationData);
     this.renderer.buildItems(this.animationData.animation.layers);
     this.updaFrameModifier();
     this.checkLoaded();
@@ -120,7 +123,7 @@
     }
     if(!this.renderedFrames[this.currentFrame]){
         this.renderedFrames[this.currentFrame] = true;
-        dataManager.renderFrame(this.layers,this.currentFrame,this.animType);
+        dataManager.renderFrame(this.animationID,this.currentFrame);
     }
     this.renderer.renderFrame(this.currentFrame);
 };
diff --git a/player/js/elements/canvasElements/CVBaseElement.js b/player/js/elements/canvasElements/CVBaseElement.js
index b3bb1f6..47c0218 100644
--- a/player/js/elements/canvasElements/CVBaseElement.js
+++ b/player/js/elements/canvasElements/CVBaseElement.js
@@ -26,7 +26,7 @@
         this.currentAnimData = null;
         return false;
     }
-    this.currentAnimData = this.data.an[this.data.an[num].forwardFrame];
+    this.currentAnimData = this.data.renderedData[num].an;
 
     if(this.data.hasMask){
         this.maskManager.prepareFrame(num);
diff --git a/player/js/elements/canvasElements/CVShapeItemElement.js b/player/js/elements/canvasElements/CVShapeItemElement.js
index 685876e..374780e 100644
--- a/player/js/elements/canvasElements/CVShapeItemElement.js
+++ b/player/js/elements/canvasElements/CVShapeItemElement.js
@@ -22,6 +22,7 @@
         return;
     }
     var num = this.frameNum;
+    this.currentData = this.data.renderedData[num];
     var ctx = this.renderer.canvasContext;
     var flag = this.renderTransform(num);
     if(this.data.type=="pathShape"){
@@ -61,12 +62,11 @@
     this.frameNum = num;
 };
 
-CVShapeItemElement.prototype.renderTransform = function(num){
-    var animData = this.data.an;
+CVShapeItemElement.prototype.renderTransform = function(){
+    var animData = this.currentData;
     if(animData.tr){
         var ctx = this.renderer.canvasContext;
-        var tr = animData.tr[animData.tr[num].forwardFrame];
-        animData.renderedFrame.tr = tr.forwardFrame;
+        var tr = animData.tr;
         var matrixValue = tr.mtArr;
         if(matrixValue[0] == 1 && matrixValue[1] == 0 && matrixValue[2] == 0 && matrixValue[3] == 1 && matrixValue[4] == 0 && matrixValue[5] == 0 && tr.o >= 1){
             return false;
@@ -180,15 +180,14 @@
 };
 
 CVShapeItemElement.prototype.renderPath = function(num){
-    var animData = this.data.an;
-    var path = animData.path[animData.path[num].forwardFrame];
+    var animData = this.currentData;
+    var path = animData.path;
 
     if(this.renderedPaths[num]){
         return;
     }
     var path2d = new Path2D();
 
-    animData.renderedFrame.path = path.pathString;
     var ctx = this.renderer.canvasContext;
 
     var pathNodes = path.pathNodes;
@@ -214,7 +213,6 @@
 CVShapeItemElement.prototype.renderEllipse = function(num){
     var animData = this.data.an;
     var ell = animData.ell[animData.ell[num].forwardFrame];
-    animData.renderedFrame.ell = ell.forwardFrame;
 
     var ctx = this.renderer.canvasContext;
 
@@ -249,10 +247,9 @@
 };
 
 CVShapeItemElement.prototype.renderFill = function(num){
-    var animData = this.data.an;
+    var animData = this.currentData;
     if(animData.fill){
-        var fill = animData.fill[animData.fill[num].forwardFrame];
-        animData.renderedFrame.fill = {color:fill.color,opacity:fill.opacity};
+        var fill = animData.fill;
         if(this.data.fillEnabled!==false){
             if(fill.opacity < 1){
                 this.renderer.canvasContext.fillStyle=fillToRgba(fill.color, fill.opacity);
@@ -266,10 +263,9 @@
 };
 
 CVShapeItemElement.prototype.renderStroke = function(num){
-    var animData = this.data.an;
+    var animData = this.currentData;
     if(animData.stroke){
-        var stroke = animData.stroke[animData.stroke[num].forwardFrame];
-        animData.renderedFrame.stroke = stroke.forwardFrame;
+        var stroke = animData.stroke;
         /*ctx.strokeStyle="red";
          */
         this.renderer.canvasContext.lineWidth=stroke.width;
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index cbea694..2dfcb2e 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -36,7 +36,7 @@
 
 CanvasRenderer.prototype.createComp = function (data) {
     data.element = new CVCompElement(data, this);
-    this.buildItems(data.layers, data.element.getType());
+    this.buildItems(data.layers);
 };
 
 CanvasRenderer.prototype.createSolid = function (data) {
diff --git a/player/js/utils/DataManager.js b/player/js/utils/DataManager.js
index 45b9167..85d168b 100644
--- a/player/js/utils/DataManager.js
+++ b/player/js/utils/DataManager.js
@@ -1,7 +1,7 @@
-var dataManager = (function(){
+function dataFunctionManager(){
     var frameRate = 0;
     var matrixInstance =  new MatrixManager();
-    var storedBezierCurves = {};
+    var animations = {};
 
     function completeTimeRemap(tm, layerFrames, offsetFrame){
         var interpolatedProperty = getInterpolatedValues(tm,layerFrames, offsetFrame);
@@ -23,6 +23,7 @@
                 layerData.parent = convertLayerNameToID(layerData.parent);
             }
             layerData.renderedFrame = {};
+            layerData.renderedData = {};
             animArray = [];
             lastFrame = -1;
             if(layerData.tm){
@@ -30,13 +31,20 @@
             }
             if(layerData.type=='PreCompLayer'){
                 completeLayers(layerData.layers);
+            }else if(layerData.type == 'ShapeLayer'){
+                var i, len = layerData.shapes.length;
+                for(i=0;i<len;i+=1){
+                    shapeItem = layerData.shapes[i];
+                    shapeItem.renderedData = {};
+                }
             }
         })
     }
 
-    function completeData(layers, fRate){
-        frameRate = fRate;
-        completeLayers(layers);
+    function completeData(animationData){
+        animations[animationData._id] = animationData;
+        frameRate = animationData.animation.frameRate;
+        completeLayers(animationData.animation.layers);
     }
 
     function convertLayerNameToID(string){
@@ -389,7 +397,7 @@
     var fillOpacity,fillColor, shape, strokeColor, strokeOpacity, strokeWidth, elmPos, elmSize, elmRound;
     var shapeTrOb = {};
 
-    function iterateLayers(layers, frameNum,renderType){
+    function iterateLayers(layers, frameNum,renderType, rendered){
 
         var offsettedFrameNum, i, len;
         var j, jLen = layers.length, item;
@@ -397,9 +405,11 @@
             item = layers[j];
             offsettedFrameNum = frameNum - item.startTime;
             if(frameNum < item.inPoint || frameNum > item.outPoint){
+                rendered.push('');
                 continue;
             }
             if(item.an[offsettedFrameNum]){
+                rendered.push('');
                 continue;
             }
             trOb = {};
@@ -413,7 +423,8 @@
             trOb.s = scale instanceof Array ? scale.length > 1 ? [scale[0]/100,scale[1]/100,scale[2]/100] : [scale[0]/100,scale[0]/100,scale[0]/100] : [scale/100,scale/100,scale/100];
             trOb.r = rot instanceof Array ? rot.length > 1 ? [rot[0]*Math.PI/180,rot[1]*Math.PI/180,rot[2]*Math.PI/180] : [rot[0]*Math.PI/180,rot[0]*Math.PI/180,rot[0]*Math.PI/180] : [0,0,rot*Math.PI/180];
             trOb.p = pos;
-            item.an[offsettedFrameNum] = {
+            rendered[j] = {};
+            rendered[j].an = {
                 forwardFrame : offsettedFrameNum,
                 tr: dataOb,
                 matrixValue: matrixInstance.getMatrix2(trOb),
@@ -439,10 +450,13 @@
             }
             if(item.type == 'PreCompLayer'){
                 timeRemapped = item.tm ? item.tm[offsettedFrameNum] < 0 ? 0 : item.tm[offsettedFrameNum] : offsettedFrameNum;
-                iterateLayers(item.layers,timeRemapped,renderType);
+                rendered.renderedArray = [];
+                iterateLayers(item.layers,timeRemapped,renderType,rendered.renderedArray);
             }else if(item.type == 'ShapeLayer'){
+                rendered[j].shapes = [];
                 len = item.shapes.length;
                 for(i=0;i<len;i+=1){
+                    rendered[j].shapes.push({});
                     shapeItem = item.shapes[i];
                     if(!shapeItem._created){
                         shapeItem.an.tr = [];
@@ -467,7 +481,7 @@
                     if(shapeItem.fl){
                         fillColor = getInterpolatedValue(shapeItem.fl.c,offsettedFrameNum, item.startTime);
                         fillOpacity = getInterpolatedValue(shapeItem.fl.o,offsettedFrameNum, item.startTime);
-                        shapeItem.an.fill[offsettedFrameNum] = {
+                        rendered[j].shapes[i].fill = {
                             color : rgbToHex(Math.round(fillColor[0]),Math.round(fillColor[1]),Math.round(fillColor[2])),
                             opacity : fillOpacity instanceof Array ? fillOpacity[0]/100 : fillOpacity/100,
                             forwardFrame : offsettedFrameNum
@@ -475,18 +489,18 @@
                     }
                     if(shapeItem.ks){
                         shape = getInterpolatedValue(shapeItem.ks,offsettedFrameNum, item.startTime);
-                        shapeItem.an.path[offsettedFrameNum] = {
+                        rendered[j].shapes[i].path = {
                             pathNodes: shape,
                             closed: shapeItem.closed,
                             forwardFrame : offsettedFrameNum
                         };
                         if(renderType == 'svg'){
-                            shapeItem.an.path[offsettedFrameNum].pathString = createPathString(shape,shapeItem.closed);
+                            rendered[j].shapes[i].path.pathString = createPathString(shape,shapeItem.closed);
                         }
                     }else if(shapeItem.el){
                         elmPos = getInterpolatedValue(shapeItem.el.p,offsettedFrameNum, item.startTime);
                         elmSize = getInterpolatedValue(shapeItem.el.s,offsettedFrameNum, item.startTime);
-                        shapeItem.an.ell[offsettedFrameNum] = {
+                        rendered[j].shapes[i].ell = {
                             p : elmPos,
                             size : elmSize,
                             forwardFrame : offsettedFrameNum
@@ -495,7 +509,7 @@
                         elmPos = getInterpolatedValue(shapeItem.rc.p,offsettedFrameNum, item.startTime);
                         elmSize = getInterpolatedValue(shapeItem.rc.s,offsettedFrameNum, item.startTime);
                         elmRound = getInterpolatedValue(shapeItem.rc.r,offsettedFrameNum, item.startTime);
-                        shapeItem.an.rect[offsettedFrameNum] = {
+                        rendered[j].shapes[i].rect = {
                             position : elmPos,
                             size : elmSize,
                             roundness : elmRound,
@@ -506,7 +520,7 @@
                         strokeColor = getInterpolatedValue(shapeItem.st.c,offsettedFrameNum, item.startTime);
                         strokeOpacity = getInterpolatedValue(shapeItem.st.o,offsettedFrameNum, item.startTime);
                         strokeWidth = getInterpolatedValue(shapeItem.st.w,offsettedFrameNum, item.startTime);
-                        shapeItem.an.stroke[offsettedFrameNum] = {
+                        rendered[j].shapes[i].stroke = {
                             color : rgbToHex(Math.round(strokeColor[0]),Math.round(strokeColor[1]),Math.round(strokeColor[2])),
                             opacity : strokeOpacity instanceof Array ? strokeOpacity[0]/100 : strokeOpacity/100,
                             width : strokeWidth instanceof Array ? strokeWidth[0] : strokeWidth,
@@ -527,12 +541,13 @@
                     shapeTrOb.mtArr = matrixInstance.getMatrixArray(shapeTrOb);
                     shapeTrOb.forwardFrame = offsettedFrameNum;
                     shapeItem.an.tr[offsettedFrameNum] = shapeTrOb;
+                    rendered[j].shapes[i].tr = shapeTrOb;
 
                     if(shapeItem.trim){
                         var trimS = getInterpolatedValue(shapeItem.trim.s,offsettedFrameNum, item.startTime);
                         var trimE = getInterpolatedValue(shapeItem.trim.e,offsettedFrameNum, item.startTime);
                         var trimO = getInterpolatedValue(shapeItem.trim.o,offsettedFrameNum, item.startTime);
-                        shapeItem.trim.an[offsettedFrameNum] = {
+                        rendered[j].shapes[i].trim = {
                             s: trimS,
                             e: trimE,
                             o: trimO,
@@ -547,8 +562,33 @@
         }
     }
 
-    function renderFrame(layers,num, renderType){
-        iterateLayers(layers, num, renderType);
+    function renderFrame(animationId,num){
+        var renderedArray = [];
+        iterateLayers(animations[animationId].animation.layers, num, animations[animationId]._animType, renderedArray);
+        populateLayers(animations[animationId].animation.layers, num,renderedArray);
+    }
+
+    function populateLayers(layers, num, rendered){
+        var i, len = layers.length, j, jLen;
+        var offsettedFrameNum, timeRemapped;
+        var shapes;
+        for(i=0;i<len;i+=1){
+            if(rendered[i] == ''){
+                continue;
+            }
+            offsettedFrameNum = num - layers[i].startTime;
+            layers[i].renderedData[offsettedFrameNum] = rendered[i];
+            if(layers[i].type == 'PreCompLayer'){
+                timeRemapped = layers[i].tm ? layers[i].tm[offsettedFrameNum] < 0 ? 0 : layers[i].tm[offsettedFrameNum] : offsettedFrameNum;
+                populateLayers(layers[i].layers,timeRemapped,rendered.renderedArray);
+            }else if(layers[i].type == 'ShapeLayer'){
+                shapes = layers[i].shapes;
+                jLen = shapes.length;
+                for(j=0;j<jLen;j+=1){
+                    shapes[j].renderedData[offsettedFrameNum] = rendered[i].shapes[j];
+                }
+            }
+        }
     }
 
     var moduleOb = {};
@@ -556,4 +596,49 @@
     moduleOb.renderFrame = renderFrame;
 
     return moduleOb;
-}());
\ No newline at end of file
+};
+if(Worker && 1 == 2){
+    function handleEvents(){
+        self.onmessage = function(e){
+            var data = e.data;
+            if(data.message == 'new'){
+                dataManager.completeData(data.animation);
+            }
+            self.postMessage("new anim created");
+        }
+    }
+// URL.createObjectURL
+    window.URL = window.URL || window.webkitURL;
+// Build a worker from an anonymous function body
+    var blobURL = URL.createObjectURL( new Blob([
+            handleEvents.toString(),
+            matrixManagerFunction.toString(),
+            'var MatrixManager = matrixManagerFunction;',
+
+            dataFunctionManager.toString(),
+            Matrix.toString(),
+
+            'var dataManager = dataFunctionManager();handleEvents();' ], { type: 'application/javascript' } ) ),
+
+        worker = new Worker( blobURL );
+// Won't be needing this anymore
+    URL.revokeObjectURL( blobURL );
+
+    worker.addEventListener('message',function(e){
+        console.log('mensaje', e.data);
+    })
+    var dataManager = function(){
+        function completeData(animationData){
+            worker.postMessage({message:'new',animation:animationData});
+        }
+        function renderFrame(num){
+
+        }
+        return {
+            completeData: completeData
+        }
+    }();
+
+}else{
+    var dataManager = dataFunctionManager();
+}
\ No newline at end of file
diff --git a/player/js/utils/MatrixManager.js b/player/js/utils/MatrixManager.js
index 9a57e1c..9e5ac33 100644
--- a/player/js/utils/MatrixManager.js
+++ b/player/js/utils/MatrixManager.js
@@ -1,4 +1,4 @@
-var MatrixManager = function(){
+function matrixManagerFunction(){
 
     var mat = new Matrix();
 
@@ -135,4 +135,5 @@
         getMatrixArray : getMatrixArray
     }
 
-};
\ No newline at end of file
+};
+var MatrixManager = matrixManagerFunction;
\ No newline at end of file