diff --git a/player/index.html b/player/index.html
index cb5f4c1..d9baebd 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:800px;height:800px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/ninja" data-bm-player="0" data-anim-type="canvas" data-anim-loop="true"></div>
+<div style="width:800px;height:800px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/shapes" data-bm-player="0" data-anim-type="canvas" data-anim-loop="true"></div>
 </body>
 </html>
diff --git a/player/js/3rd_party/transformation-matrix.js b/player/js/3rd_party/transformation-matrix.js
index 9bd83e1..67fc5ea 100644
--- a/player/js/3rd_party/transformation-matrix.js
+++ b/player/js/3rd_party/transformation-matrix.js
@@ -36,6 +36,8 @@
 
     me.context = context;
 
+    me.cos = me.sin = 0;
+
     // reset canvas transformations (if any) to enable 100% sync.
     if (context) context.setTransform(1, 0, 0, 1, 0, 0);
 }
@@ -100,9 +102,12 @@
      * @param {number} angle - angle in radians
      */
     rotate: function(angle) {
-        var cos = Math.cos(angle),
-            sin = Math.sin(angle);
-        return this._t(cos, sin, -sin, cos, 0, 0);
+        if(angle == 0){
+            return this;
+        }
+        this.cos = Math.cos(angle);
+        this.sin = Math.sin(angle);
+        return this._t(this.cos, this.sin, -this.sin, this.cos, 0, 0);
     },
 
     /**
@@ -138,6 +143,9 @@
      * @param {number} sy - scale factor y (1 does nothing)
      */
     scale: function(sx, sy) {
+        if(sx == 1 && sy == 1){
+            return this;
+        }
         return this._t(sx, 0, 0, sy, 0, 0);
     },
 
@@ -217,14 +225,13 @@
      * @param {number} f - translate y
      */
     setTransform: function(a, b, c, d, e, f) {
-        var me = this;
-        me.a = a;
-        me.b = b;
-        me.c = c;
-        me.d = d;
-        me.e = e;
-        me.f = f;
-        return me._x();
+        this.a = a;
+        this.b = b;
+        this.c = c;
+        this.d = d;
+        this.e = e;
+        this.f = f;
+        return this._x();
     },
 
     /**
@@ -263,27 +270,26 @@
      */
     transform: function(a2, b2, c2, d2, e2, f2) {
 
-        var me = this,
-            a1 = me.a,
-            b1 = me.b,
-            c1 = me.c,
-            d1 = me.d,
-            e1 = me.e,
-            f1 = me.f;
+        var a1 = this.a,
+            b1 = this.b,
+            c1 = this.c,
+            d1 = this.d,
+            e1 = this.e,
+            f1 = this.f;
 
         /* matrix order (canvas compatible):
          * ace
          * bdf
          * 001
          */
-        me.a = a1 * a2 + c1 * b2;
-        me.b = b1 * a2 + d1 * b2;
-        me.c = a1 * c2 + c1 * d2;
-        me.d = b1 * c2 + d1 * d2;
-        me.e = a1 * e2 + c1 * f2 + e1;
-        me.f = b1 * e2 + d1 * f2 + f1;
+        this.a = a1 * a2 + c1 * b2;
+        this.b = b1 * a2 + d1 * b2;
+        this.c = a1 * c2 + c1 * d2;
+        this.d = b1 * c2 + d1 * d2;
+        this.e = a1 * e2 + c1 * f2 + e1;
+        this.f = b1 * e2 + d1 * f2 + f1;
 
-        return me._x();
+        return this._x();
     },
 
     /**
@@ -672,8 +678,7 @@
      * @returns {Array}
      */
     toArray: function() {
-        var me = this;
-        return [me.a, me.b, me.c, me.d, me.e, me.f];
+        return [this.a, this.b, this.c, this.d, this.e, this.f];
     },
 
     /**
@@ -681,7 +686,7 @@
      * @returns {string}
      */
     toCSS: function() {
-        return "matrix(" + this.toArray() + ")";
+        return "matrix(" + this.a + ',' + this.b + ',' + this.c + ',' + this.d + ',' + this.e + ',' + this.f + ")";
     },
 
     /**
@@ -717,9 +722,8 @@
      * @private
      */
     _x: function() {
-        var me = this;
-        if (me.context)
-            me.context.setTransform(me.a, me.b, me.c, me.d, me.e, me.f);
-        return me;
+        if (this.context)
+            this.context.setTransform(this.a, this.b, this.c, this.d, this.e, this.f);
+        return this;
     }
 };
\ No newline at end of file
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index f11c8b8..4bb6b11 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -103,7 +103,7 @@
 
 AnimationItem.prototype.gotoFrame = function () {
     if(subframeEnabled){
-        this.renderedFrames = [];
+        //this.renderedFrames = [];
         this.currentFrame = Math.round(this.currentRawFrame*100)/100;
     }else{
         this.currentFrame = Math.floor(this.currentRawFrame);
diff --git a/player/js/elements/canvasElements/CVBaseElement.js b/player/js/elements/canvasElements/CVBaseElement.js
index d04a16a..9571579 100644
--- a/player/js/elements/canvasElements/CVBaseElement.js
+++ b/player/js/elements/canvasElements/CVBaseElement.js
@@ -43,10 +43,6 @@
         return false;
     }
     var ctx = this.renderer.canvasContext;
-    /*console.log('this.data.layerName: ',this.data.layerName);
-    console.log('this.data.width: ',this.data.width);
-    console.log('this.data.height: ',this.data.height);*/
-    //ctx.translate(-this.data.width/2,-this.data.height/2);
     if(this.data.parentHierarchy){
         var i, len = this.data.parentHierarchy.length, animData;
         for(i = len - 1; i>=0 ; i -= 1){
@@ -58,7 +54,6 @@
         }
     }
 
-     //ctx.translate(this.currentAnimData.tr.a[0],this.currentAnimData.tr.a[1]);
     ctx.globalAlpha = this.currentAnimData.tr.o;
     var matrixValue = this.currentAnimData.matrixArray;
      ctx.transform(matrixValue[0], matrixValue[1], matrixValue[2], matrixValue[3], matrixValue[4], matrixValue[5]);
diff --git a/player/js/elements/canvasElements/CVShapeItemElement.js b/player/js/elements/canvasElements/CVShapeItemElement.js
index 7f6b162..7ac9bc6 100644
--- a/player/js/elements/canvasElements/CVShapeItemElement.js
+++ b/player/js/elements/canvasElements/CVShapeItemElement.js
@@ -3,6 +3,8 @@
     this.renderer = renderer;
     this.frameNum = -1;
     this.renderedPaths = {};
+    this.trims = [];
+    this.trimPos = 0;
 }
 
 CVShapeItemElement.prototype.adjustTrim = function(){
@@ -18,8 +20,7 @@
 CVShapeItemElement.prototype.renderShape = function(){
     var num = this.frameNum;
     var ctx = this.renderer.canvasContext;
-    ctx.save();
-    this.renderTransform(num);
+    var flag = this.renderTransform(num);
     if(this.data.type=="pathShape"){
         if(this.data.trim){
             this.renderTrimPath(num);
@@ -48,8 +49,9 @@
         this.renderer.canvasContext.fill();
         this.renderer.canvasContext.stroke();
     }
-    delete this.renderedPaths[num];
-    ctx.restore();
+    if(flag){
+        ctx.restore();
+    }
 };
 
 CVShapeItemElement.prototype.prepareFrame = function(num){
@@ -63,15 +65,25 @@
         var tr = animData.tr[animData.tr[num].forwardFrame];
         animData.renderedFrame.tr = tr.forwardFrame;
         var matrixValue = tr.mtArr;
-        //ctx.translate(tr.a[0],tr.a[1]);
+        if(matrixValue[0] == 1 && matrixValue[1] == 0 && matrixValue[2] == 0 && matrixValue[3] == 1 && matrixValue[4] == 0 && matrixValue[5] == 0){
+            return false;
+        }
+        ctx.save();
         ctx.transform(matrixValue[0], matrixValue[1], matrixValue[2], matrixValue[3], matrixValue[4], matrixValue[5]);
         ctx.translate(-tr.a[0],-tr.a[1]);
-        //ctx.translate(-tr.a[0],-tr.a[1]);
-        //ctx.translate(-tr.a[0],-tr.a[1]);
-
+        return true;
     }
 };
 
+CVShapeItemElement.prototype.addToTrim = function(pos,s,e){
+    if(!this.trims[pos]){
+        this.trims.push({});
+    }
+    this.trims[pos].s = s;
+    this.trims[pos].e = e;
+    this.trims[pos].ended = false;
+};
+
 CVShapeItemElement.prototype.renderTrimPath = function(num){
     var trimData = this.data.trim.an[this.data.trim.an[num].forwardFrame];
     if(trimData.e == trimData.s){
@@ -88,36 +100,29 @@
     var totalLength = 0;
     var i, len = pathNodes.v.length;
     for(i = 0; i < len - 1; i += 1){
-        segments.push(dataManager.drawBezierCurve([pathNodes.v[i],pathNodes.v[i+1],pathNodes.o[i],pathNodes.i[i+1]]));
+        segments.push(bez.drawBezierCurve(pathNodes.v[i],pathNodes.v[i+1],pathNodes.o[i],pathNodes.i[i+1]));
         totalLength += segments[i].segmentLength;
     }
     if(path.closed){
-        segments.push(dataManager.drawBezierCurve([pathNodes.v[len - 1],pathNodes.v[0],pathNodes.o[len - 1],pathNodes.i[0]]));
+        segments.push(bez.drawBezierCurve(pathNodes.v[len - 1],pathNodes.v[0],pathNodes.o[len - 1],pathNodes.i[0]));
         totalLength += segments[i].segmentLength;
     }
     len = segments.length;
     var segmentLength = totalLength*(trimData.e - trimData.s)/100;
     var offset = ((trimData.s/100 + (trimData.o%360)/360)%1)*totalLength;
-    var trims = [];
+    var endedCount = 0;
     if(offset + segmentLength - totalLength > 0.00001){
         var secondarySegment = offset + segmentLength - totalLength;
-        trims.push({
-            s: offset,
-            e: offset + segmentLength - secondarySegment
-        });
-        trims.push({
-            s: 0,
-            e: offset + segmentLength - totalLength
-        })
+        this.addToTrim(0,offset,offset + segmentLength - secondarySegment);
+        this.addToTrim(1,0,offset + segmentLength - totalLength);
+        endedCount += 2;
     }else{
-        trims.push({
-            s: offset,
-            e: offset + segmentLength
-        })
+        this.addToTrim(0,offset,offset + segmentLength);
+        endedCount += 1;
     }
     var addedLength = 0;
     var j, jLen,perc,flag, ended = false;
-    var k, kLen = trims.length;
+    var k, kLen = this.trims.length;
 
     for(i = 0; i < len; i += 1){
         if(ended){
@@ -126,7 +131,7 @@
         jLen = segments[i].points.length;
         flag = true;
         for(k = 0; k < kLen; k+=1){
-            if(addedLength + segments[i].segmentLength > trims[k].s){
+            if(addedLength + segments[i].segmentLength > this.trims[k].s){
                 flag = false;
             }
         }
@@ -138,26 +143,28 @@
             if(ended){
                 break;
             }
-            kLen = trims.length;
+            kLen = this.trims.length;
             addedLength += segments[i].points[j].partialLength;
             for(k = 0; k < kLen; k+=1){
-                if(trims[k].s >= addedLength && trims[k].s < addedLength + segments[i].points[j+1].partialLength){
-                    perc = ( trims[k].s - addedLength)/segments[i].points[j+1].partialLength;
+                if(this.trims[k].ended){
+                    continue;
+                }
+                if(this.trims[k].s >= addedLength && this.trims[k].s < addedLength + segments[i].points[j+1].partialLength){
+                    perc = ( this.trims[k].s - addedLength)/segments[i].points[j+1].partialLength;
                     path2d.moveTo(segments[i].points[j].point[0]+(segments[i].points[j+1].point[0] - segments[i].points[j].point[0])*perc
                         ,segments[i].points[j].point[1]+(segments[i].points[j+1].point[1] - segments[i].points[j].point[1])*perc);
                 }
-                if(trims[k].e > addedLength && trims[k].e <= addedLength + segments[i].points[j+1].partialLength){
-                    perc = ( trims[k].e - addedLength)/segments[i].points[j+1].partialLength;
+                if(this.trims[k].e > addedLength && this.trims[k].e <= addedLength + segments[i].points[j+1].partialLength){
+                    perc = ( this.trims[k].e - addedLength)/segments[i].points[j+1].partialLength;
                     path2d.lineTo(segments[i].points[j].point[0]+(segments[i].points[j+1].point[0] - segments[i].points[j].point[0])*perc
                         ,segments[i].points[j].point[1]+(segments[i].points[j+1].point[1] - segments[i].points[j].point[1])*perc);
-                    trims.splice(k,1);
-                    k -= 1;
-                    kLen -= 1;
-                    if(kLen == 0){
+                    endedCount -= 1;
+                    this.trims[k].ended = false;
+                    if(endedCount == 0){
                         ended = true;
                         break;
                     }
-                }else if(addedLength > trims[k].s && addedLength < trims[k].e){
+                }else if(addedLength > this.trims[k].s && addedLength < this.trims[k].e){
                     path2d.lineTo(segments[i].points[j].point[0],segments[i].points[j].point[1]);
                 }
             }
@@ -184,14 +191,11 @@
     }
     var i,len = pathNodes.i.length;
     ctx.beginPath();
-    for(i=0;i<len;i+=1){
-        if(i == 0){
-            path2d.moveTo(pathNodes.v[i][0],pathNodes.v[i][1]);
-        }else{
-            path2d.bezierCurveTo(pathNodes.o[i-1][0]+pathNodes.v[i-1][0],pathNodes.o[i-1][1]+pathNodes.v[i-1][1]
-                ,pathNodes.i[i][0]+pathNodes.v[i][0],pathNodes.i[i][1]+pathNodes.v[i][1]
-                ,pathNodes.v[i][0],pathNodes.v[i][1]);
-        }
+    path2d.moveTo(pathNodes.v[0][0],pathNodes.v[0][1]);
+    for(i=1;i<len;i+=1){
+        path2d.bezierCurveTo(pathNodes.o[i-1][0]+pathNodes.v[i-1][0],pathNodes.o[i-1][1]+pathNodes.v[i-1][1]
+            ,pathNodes.i[i][0]+pathNodes.v[i][0],pathNodes.i[i][1]+pathNodes.v[i][1]
+            ,pathNodes.v[i][0],pathNodes.v[i][1]);
     }
     if(path.closed){
         path2d.bezierCurveTo(pathNodes.o[i-1][0]+pathNodes.v[i-1][0],pathNodes.o[i-1][1]+pathNodes.v[i-1][1]
@@ -244,16 +248,15 @@
         var fill = animData.fill[animData.fill[num].forwardFrame];
         animData.renderedFrame.fill = {color:fill.color,opacity:fill.opacity};
         if(this.data.fillEnabled!==false){
-            var rgbColor = hexToRgb(fill.color);
-            this.renderer.canvasContext.fillStyle='rgba('+rgbColor.r+','+rgbColor.g+','+rgbColor.b+','+fill.opacity+')';
-        }else{
-            this.renderer.canvasContext.fillStyle='rgba(0,0,0,0)';
+            if(fill.opacity < 1){
+                this.renderer.canvasContext.fillStyle=fillToRgba(fill.color, fill.opacity);
+            }else{
+                this.renderer.canvasContext.fillStyle=fill.color;
+            }
+            return;
         }
-    }else{
-        this.renderer.canvasContext.fillStyle='rgba(0,0,0,0)';
     }
-    //this.renderer.canvasContext.fillStyle='rgba(255,0,0,0)';
-    //this.renderer.canvasContext.globalAlpha = .3;
+    this.renderer.canvasContext.fillStyle='rgba(0,0,0,0)';
 };
 
 CVShapeItemElement.prototype.renderStroke = function(num){
@@ -265,12 +268,13 @@
          */
         this.renderer.canvasContext.lineWidth=stroke.width;
         if(this.data.strokeEnabled!==false){
-            var rgbColor = hexToRgb(stroke.color);
-            this.renderer.canvasContext.strokeStyle='rgba('+rgbColor.r+','+rgbColor.g+','+rgbColor.b+','+stroke.opacity+')';
-        }else{
-            this.renderer.canvasContext.strokeStyle='rgba(0,0,0,0)';
+            if(stroke.opacity < 1){
+                this.renderer.canvasContext.strokeStyle=fillToRgba(stroke.color, stroke.opacity);
+            }else{
+                this.renderer.canvasContext.strokeStyle=stroke.color;
+            }
+            return;
         }
-    }else{
-        this.renderer.canvasContext.strokeStyle = 'rgba(0,0,0,0)';
     }
+    this.renderer.canvasContext.strokeStyle = 'rgba(0,0,0,0)';
 };
diff --git a/player/js/utils/DataManager.js b/player/js/utils/DataManager.js
index 30089cc..52adf1e 100644
--- a/player/js/utils/DataManager.js
+++ b/player/js/utils/DataManager.js
@@ -64,6 +64,7 @@
         var curveSegments = 1000;
         var absToCoord = [];
         var absTiCoord = [];
+        //len = keyframes.length;
         keyframes.forEach(function(keyData){
             keyData.t -= offsetTime;
             if(keyData.to){
@@ -130,7 +131,7 @@
                 }else if(i>=keyData.t && i<nextKeyData.t){
                     propertyArray = [];
                     if(keyData.to){
-                        perc = bez.getCurve([keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y])('',i-keyData.t,0,1,nextKeyData.t-keyData.t);
+                        perc = bez.getEasingCurve([keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y])('',i-keyData.t,0,1,nextKeyData.t-keyData.t);
                         var bezierData = keyData.bezierData;
                         var distanceInLine = bezierData.segmentLength*perc;
                         var k, kLen, segmentPerc;
@@ -169,7 +170,7 @@
                                     inX = keyData.i.x;
                                     inY = keyData.i.y;
                                 }
-                                perc = bez.getCurve([outX,outY,inX,inY])('',i-keyData.t,0,1,nextKeyData.t-keyData.t);
+                                perc = bez.getEasingCurve([outX,outY,inX,inY])('',i-keyData.t,0,1,nextKeyData.t-keyData.t);
                             }
                             // for shapes
                             if(startItem.i){
@@ -235,106 +236,6 @@
         return valuesArray;
     }
 
-    function drawBezierCurve(coOrdArray){
-        var bezierName = coOrdArray.join('_').replace(/\./g, 'p');
-        if(storedBezierCurves[bezierName]){
-
-            return storedBezierCurves[bezierName];
-        }
-        var curveSegments = 1000, absToCoord, absTiCoord;
-        var k;
-        var triCoord1,triCoord2,triCoord3,liCoord1,liCoord2,ptCoord,perc,addedLength = 0;
-        var ptDistance;
-        var point,lastPoint = null;
-        var bezierData = {
-            points :[],
-            segmentLength: 0
-        };
-        if(pointOnLine2D(coOrdArray[0][0],coOrdArray[0][1],coOrdArray[1][0],coOrdArray[1][1],coOrdArray[0][0]+coOrdArray[2][0],coOrdArray[0][1]+coOrdArray[2][1])
-            && pointOnLine2D(coOrdArray[0][0],coOrdArray[0][1],coOrdArray[1][0],coOrdArray[1][1],coOrdArray[1][0]+coOrdArray[3][0],coOrdArray[1][1]+coOrdArray[3][1])){
-            curveSegments = 2;
-        }
-        for(k=0;k<curveSegments;k+=1){
-            point = [];
-            perc = k/(curveSegments-1);
-            ptDistance = 0;
-            absToCoord = [];
-            absTiCoord = [];
-            coOrdArray[2].forEach(function(item,index){
-                if(absToCoord[index] == null){
-                    absToCoord[index] = coOrdArray[0][index] + item;
-                    absTiCoord[index] = coOrdArray[1][index] + coOrdArray[3][index];
-                }
-                triCoord1 = coOrdArray[0][index] + (absToCoord[index] - coOrdArray[0][index])*perc;
-                triCoord2 = absToCoord[index] + (absTiCoord[index] - absToCoord[index])*perc;
-                triCoord3 = absTiCoord[index] + (coOrdArray[1][index] - absTiCoord[index])*perc;
-                liCoord1 = triCoord1 + (triCoord2 - triCoord1)*perc;
-                liCoord2 = triCoord2 + (triCoord3 - triCoord2)*perc;
-                ptCoord = liCoord1 + (liCoord2 - liCoord1)*perc;
-                point.push(ptCoord);
-                if(lastPoint !== null){
-                    ptDistance += Math.pow(point[index] - lastPoint[index],2);
-                }
-            });
-            ptDistance = Math.sqrt(ptDistance);
-            addedLength += ptDistance;
-            bezierData.points.push({partialLength: ptDistance, point: point});
-            lastPoint = point;
-        }
-        bezierData.segmentLength = addedLength;
-        storedBezierCurves[bezierName] = bezierData;
-        return bezierData;
-    }
-
-    function pointOnLine2D(x1,y1, x2,y2, x3,y3){
-        return Math.abs(((x2 - x1) * (y3 - y1)) - ((x3 - x1) * (y2 - y1))) < 0.0000001;
-    }
-
-    function buildBezierData(keyData){
-        var curveSegments = 1000, absToCoord, absTiCoord;
-        var k;
-        var triCoord1,triCoord2,triCoord3,liCoord1,liCoord2,ptCoord,perc,addedLength = 0;
-        var ptDistance;
-        var point,lastPoint = null;
-        var bezierData = {
-            points :[],
-            segmentLength: 0
-        };
-        if(pointOnLine2D(keyData.s[0],keyData.s[1],keyData.e[0],keyData.e[1],keyData.s[0]+keyData.to[0],keyData.s[1]+keyData.to[1])
-            && pointOnLine2D(keyData.s[0],keyData.s[1],keyData.e[0],keyData.e[1],keyData.e[0]+keyData.ti[0],keyData.e[1]+keyData.ti[1])){
-            curveSegments = 2;
-        }
-        for(k=0;k<curveSegments;k+=1){
-            point = [];
-            perc = k/(curveSegments-1);
-            ptDistance = 0;
-            absToCoord = [];
-            absTiCoord = [];
-            keyData.to.forEach(function(item,index){
-                if(absToCoord[index] == null){
-                    absToCoord[index] = keyData.s[index] + item;
-                    absTiCoord[index] = keyData.e[index] + keyData.ti[index];
-                }
-                triCoord1 = keyData.s[index] + (absToCoord[index] - keyData.s[index])*perc;
-                triCoord2 = absToCoord[index] + (absTiCoord[index] - absToCoord[index])*perc;
-                triCoord3 = absTiCoord[index] + (keyData.e[index] - absTiCoord[index])*perc;
-                liCoord1 = triCoord1 + (triCoord2 - triCoord1)*perc;
-                liCoord2 = triCoord2 + (triCoord3 - triCoord2)*perc;
-                ptCoord = liCoord1 + (liCoord2 - liCoord1)*perc;
-                point.push(ptCoord);
-                if(lastPoint !== null){
-                    ptDistance += Math.pow(point[index] - lastPoint[index],2);
-                }
-            });
-            ptDistance = Math.sqrt(ptDistance);
-            addedLength += ptDistance;
-            bezierData.points.push({partialLength: addedLength, point: point});
-            lastPoint = point;
-        }
-        keyData.bezierData = bezierData;
-        bezierData.segmentLength = addedLength;
-    }
-
     var keyData, nextKeyData,propertyArray,bezierData;
 
     function getInterpolatedValue(keyframes, frameNum, offsetTime){
@@ -355,10 +256,10 @@
         }
 
         if(keyData.to && !keyData.bezierData){
-            buildBezierData(keyData);
+            bez.buildBezierData(keyData);
         }
         var k, kLen;
-        var easingFnName, perc, j = 0;
+        var perc, j = 0;
         propertyArray = [];
         if(keyData.to){
             bezierData = keyData.bezierData;
@@ -367,18 +268,20 @@
             }else if(frameNum < keyData.t-offsetTime){
                 return bezierData.points[0].point;
             }
-            perc = bez.getCurve([keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y])('',(frameNum)-(keyData.t-offsetTime),0,1,(nextKeyData.t-offsetTime)-(keyData.t-offsetTime));
+            perc = bez.getEasingCurve([keyData.o.x,keyData.o.y,keyData.i.x,keyData.i.y])('',(frameNum)-(keyData.t-offsetTime),0,1,(nextKeyData.t-offsetTime)-(keyData.t-offsetTime));
             var distanceInLine = bezierData.segmentLength*perc;
             var segmentPerc;
+            var addedLength = 0;
             while(j<bezierData.points.length){
+                addedLength +=bezierData.points[j].partialLength;
                 if(frameNum == 0 || distanceInLine == 0 || perc == 0){
                     propertyArray = bezierData.points[j].point;
                     break;
                 }else if(j == bezierData.points.length - 1){
                     propertyArray = bezierData.points[j].point;
-                }else if(distanceInLine > bezierData.points[j].partialLength && distanceInLine < bezierData.points[j+1].partialLength){
+                }else if(distanceInLine > addedLength && distanceInLine < addedLength + bezierData.points[j+1].partialLength){
                     kLen = bezierData.points[j].point.length;
-                    segmentPerc = (distanceInLine-bezierData.points[j].partialLength)/(bezierData.points[j+1].partialLength-bezierData.points[j].partialLength);
+                    segmentPerc = (distanceInLine-addedLength)/(bezierData.points[j+1].partialLength);
                     for(k=0;k<kLen;k+=1){
                         propertyArray.push(bezierData.points[j].point[k] + (bezierData.points[j+1].point[k] - bezierData.points[j].point[k])*segmentPerc);
                     }
@@ -403,7 +306,7 @@
                         inX = keyData.i.x;
                         inY = keyData.i.y;
                     }
-                    perc = bez.getCurve([outX,outY,inX,inY])('',(frameNum)-(keyData.t-offsetTime),0,1,(nextKeyData.t-offsetTime)-(keyData.t-offsetTime));
+                    perc = bez.getEasingCurve([outX,outY,inX,inY])('',(frameNum)-(keyData.t-offsetTime),0,1,(nextKeyData.t-offsetTime)-(keyData.t-offsetTime));
                     if(frameNum >= nextKeyData.t-offsetTime){
                         perc = 1;
                     }else if(frameNum < keyData.t-offsetTime){
@@ -510,9 +413,6 @@
             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;
-            if(subframeEnabled){
-                item.an = [];
-            }
             item.an[offsettedFrameNum] = {
                 forwardFrame : offsettedFrameNum,
                 tr: dataOb,
@@ -523,7 +423,7 @@
                 maskProps = item.masksProperties;
                 len = maskProps.length;
                 for(i=0;i<len;i+=1){
-                    if(!maskProps[i].pathStrings || subframeEnabled){
+                    if(!maskProps[i].pathStrings){
                         maskProps[i].pathStrings = [];
                         maskProps[i].pathVertices = [];
                         maskProps[i].opacity = [];
@@ -544,7 +444,7 @@
                 len = item.shapes.length;
                 for(i=0;i<len;i+=1){
                     shapeItem = item.shapes[i];
-                    if(!shapeItem._created || subframeEnabled){
+                    if(!shapeItem._created){
                         shapeItem.an.tr = [];
                         shapeItem.an.renderedFrame = {};
                         if(shapeItem.ks){
@@ -561,7 +461,7 @@
                             shapeItem.an.stroke = [];
                         }
                     }
-                    if(shapeItem.trim && (!shapeItem._created  || subframeEnabled)){
+                    if(shapeItem.trim && (!shapeItem._created)){
                         shapeItem.trim.an = [];
                     }
                     if(shapeItem.fl){
@@ -654,7 +554,6 @@
     var moduleOb = {};
     moduleOb.completeData = completeData;
     moduleOb.renderFrame = renderFrame;
-    moduleOb.drawBezierCurve = drawBezierCurve;
 
     return moduleOb;
 }());
\ No newline at end of file
diff --git a/player/js/utils/MatrixManager.js b/player/js/utils/MatrixManager.js
index a870542..9a57e1c 100644
--- a/player/js/utils/MatrixManager.js
+++ b/player/js/utils/MatrixManager.js
@@ -1,5 +1,7 @@
 var MatrixManager = function(){
 
+    var mat = new Matrix();
+
     var returnMatrix3D = function(rX, rY, rZ, scaleX, scaleY, scaleZ, tX, tY, tZ) {
 
         var rotationXMatrix, rotationYMatrix, rotationZMatrix, s, scaleMatrix, transformationMatrix, translationMatrix;
@@ -63,7 +65,7 @@
     };*/
 
     var returnMatrix2D = function(rX, scaleX, scaleY, tX, tY){
-        return new Matrix().translate(tX,tY).rotate(rX).scale(scaleX,scaleY).toCSS();
+        return mat.reset().translate(tX,tY).rotate(rX).scale(scaleX,scaleY).toCSS();
     };
 
     /*var returnMatrix2DArray = function(rX, scaleX, scaleY, tX, tY){
@@ -86,7 +88,7 @@
     };*/
 
     var returnMatrix2DArray = function(rX, scaleX, scaleY, tX, tY){
-        return new Matrix().translate(tX,tY).rotate(rX).scale(scaleX,scaleY).toArray();
+        return mat.reset().translate(tX,tY).rotate(rX).scale(scaleX,scaleY).toArray();
     };
 
     var get2DMatrix = function(animData){
diff --git a/player/js/utils/bez.js b/player/js/utils/bez.js
new file mode 100644
index 0000000..7d8f8e3
--- /dev/null
+++ b/player/js/utils/bez.js
@@ -0,0 +1,101 @@
+var bez = (function(){
+
+    var easingFunctions = {};
+    var storedBezierCurves = {};
+
+    function pointOnLine2D(x1,y1, x2,y2, x3,y3){
+        return Math.abs(((x2 - x1) * (y3 - y1)) - ((x3 - x1) * (y2 - y1))) < 0.0000001;
+    }
+
+    function getEasingCurve(encodedFuncName, coOrdArray) {
+        coOrdArray = encodedFuncName;
+        encodedFuncName = 'bez_' + coOrdArray.join('_').replace(/\./g, 'p');
+        if(easingFunctions[encodedFuncName]){
+            return easingFunctions[encodedFuncName];
+        }
+        var	polyBez = function(p1, p2) {
+            var A = [null, null], B = [null, null], C = [null, null],
+                bezCoOrd = function(t, ax) {
+                    C[ax] = 3 * p1[ax], B[ax] = 3 * (p2[ax] - p1[ax]) - C[ax], A[ax] = 1 - C[ax] - B[ax];
+                    return t * (C[ax] + t * (B[ax] + t * A[ax]));
+                };
+            return function(t) {
+                var x = t, i = 0, z;
+                while (++i < 14) {
+                    z = bezCoOrd(x, 0) - t;
+                    if (Math.abs(z) < 1e-3) break;
+                    x -= z / (C[0] + x * (2 * B[0] + 3 * A[0] * x));
+                }
+                return bezCoOrd(x, 1);
+            }
+        };
+        easingFunctions[encodedFuncName] = function(x, t, b, c, d) {
+            return c * polyBez([coOrdArray[0], coOrdArray[1]], [coOrdArray[2], coOrdArray[3]])(t/d) + b;
+        };
+        return easingFunctions[encodedFuncName];
+    }
+
+    function drawBezierCurve(pt1,pt2,pt3,pt4){
+        var bezierName = (pt1.join('_')+'_'+pt2.join('_')+'_'+pt3.join('_')+'_'+pt4.join('_')).replace(/\./g, 'p');
+        if(storedBezierCurves[bezierName]){
+            return storedBezierCurves[bezierName];
+        }
+        var curveSegments = 500, absToCoord, absTiCoord;
+        var k;
+        var i, len;
+        var triCoord1,triCoord2,triCoord3,liCoord1,liCoord2,ptCoord,perc,addedLength = 0;
+        var ptDistance;
+        var point,lastPoint = null;
+        var bezierData = {
+            points :[],
+            segmentLength: 0
+        };
+        if(pointOnLine2D(pt1[0],pt1[1],pt2[0],pt2[1],pt1[0]+pt3[0],pt1[1]+pt3[1])
+            && pointOnLine2D(pt1[0],pt1[1],pt2[0],pt2[1],pt2[0]+pt4[0],pt2[1]+pt4[1])){
+            curveSegments = 2;
+        }
+        for(k=0;k<curveSegments;k+=1){
+            point = [];
+            perc = k/(curveSegments-1);
+            ptDistance = 0;
+            absToCoord = [];
+            absTiCoord = [];
+            len = pt3.length;
+            for(i=0;i<len;i+=1){
+                if(absToCoord[i] == null){
+                    absToCoord[i] = pt1[i] + pt3[i];
+                    absTiCoord[i] = pt2[i] + pt4[i];
+                }
+                triCoord1 = pt1[i] + (absToCoord[i] - pt1[i])*perc;
+                triCoord2 = absToCoord[i] + (absTiCoord[i] - absToCoord[i])*perc;
+                triCoord3 = absTiCoord[i] + (pt2[i] - absTiCoord[i])*perc;
+                liCoord1 = triCoord1 + (triCoord2 - triCoord1)*perc;
+                liCoord2 = triCoord2 + (triCoord3 - triCoord2)*perc;
+                ptCoord = liCoord1 + (liCoord2 - liCoord1)*perc;
+                point.push(ptCoord);
+                if(lastPoint !== null){
+                    ptDistance += Math.pow(point[i] - lastPoint[i],2);
+                }
+            }
+            ptDistance = Math.sqrt(ptDistance);
+            addedLength += ptDistance;
+            bezierData.points.push({partialLength: ptDistance, point: point});
+            lastPoint = point;
+        }
+        bezierData.segmentLength = addedLength;
+        storedBezierCurves[bezierName] = bezierData;
+        return bezierData;
+    }
+
+    function buildBezierData(keyData){
+        keyData.bezierData = drawBezierCurve(keyData.s,keyData.e,keyData.to,keyData.ti);
+    }
+
+    var ob = {
+        getEasingCurve : getEasingCurve,
+        drawBezierCurve : drawBezierCurve,
+        buildBezierData : buildBezierData
+    };
+
+    return ob;
+}());
\ No newline at end of file
diff --git a/player/js/utils/common.js b/player/js/utils/common.js
index bf7d32d..ad9bf7c 100644
--- a/player/js/utils/common.js
+++ b/player/js/utils/common.js
@@ -48,4 +48,9 @@
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16)
     } : null;
+}
+
+function fillToRgba(hex,alpha){
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? 'rgba('+parseInt(result[1], 16)+','+parseInt(result[2], 16)+','+parseInt(result[3], 16)+','+ alpha+')' : null;
 }
\ No newline at end of file