diff --git a/player/index.html b/player/index.html
index e62da68..a2f3fab 100644
--- a/player/index.html
+++ b/player/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
+    <meta charset="utf-8"/>
     <style>
         body, html{
             background-color:#ddd;
@@ -27,6 +28,7 @@
         }
 
     </style>
+     <script src="three.min.js"></script>
     <!-- build:js bodymovin.js -->
      <script src="js/main.js"></script>
     <script src="js/utils/common.js"></script>
@@ -39,6 +41,7 @@
     <script src="js/utils/bez.js"></script>
     <script src="js/utils/DataManager.js"></script>
     <script src="js/utils/FontManager.js"></script>
+    <script src="js/utils/TransformProperty.js"></script>
     <script src="js/utils/PropertyFactory.js"></script>
     <script src="js/utils/shapes/ShapePath.js"></script>
     <script src="js/utils/shapes/ShapeProperty.js"></script>
@@ -58,6 +61,7 @@
     <script src="js/renderers/SVGRenderer.js"></script>
     <script src="js/renderers/CanvasRenderer.js" data-light-skip="true"></script>
     <script src="js/renderers/HybridRenderer.js" data-light-skip="true"></script>
+    <script src="js/renderers/ThreejsRenderer.js" data-light-skip="true"></script>
     <script src="js/mask.js"></script>
     <script src="js/elements/BaseElement.js"></script>
     <script src="js/elements/svgElements/SVGBaseElement.js"></script>
@@ -88,6 +92,11 @@
     <script src="js/elements/htmlElements/HTextElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HImageElement.js" data-light-skip="true"></script>
     <script src="js/elements/htmlElements/HCameraElement.js" data-light-skip="true"></script>
+    <script src="js/elements/threejsElements/TBaseElement.js" data-light-skip="true"></script>
+    <script src="js/elements/threejsElements/TCameraElement.js" data-light-skip="true"></script>
+    <script src="js/elements/threejsElements/TSolidElement.js" data-light-skip="true"></script>
+    <script src="js/elements/threejsElements/TImageElement.js" data-light-skip="true"></script>
+    <script src="js/elements/threejsElements/TMaskElement.js" data-light-skip="true"></script>
     <script src="js/animation/AnimationManager.js"></script>
     <script src="js/animation/AnimationItem.js"></script>
     <!-- Expressions -->
@@ -119,8 +128,8 @@
     var elem = document.getElementById('bodymovin')
     var animData = {
         container: elem,
-        renderer: 'svg',
-        loop: true,
+        renderer: 'three',
+        loop: false,
         autoplay: true,
         rendererSettings: {
             progressiveLoad:false
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 7df5f96..f5ec04d 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -48,6 +48,9 @@
         case 'svg':
             this.renderer = new SVGRenderer(this, params.rendererSettings);
             break;
+        case 'three':
+            this.renderer = new ThreejsRenderer(this, params.rendererSettings);
+            break;
         case 'hybrid':
         case 'html':
         default:
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index 833c499..3ca9ab6 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -186,7 +186,7 @@
     this.lastNum = -99999;
     if(this.data.ks){
         this.finalTransform = {
-            mProp: PropertyFactory.getProp(this,this.data.ks,2,null,this.dynamicProperties),
+            mProp: new TransformProperty(this,this.data.ks, this.dynamicProperties, this.elementType === 'three'),
             matMdf: false,
             opMdf: false,
             mat: new Matrix(),
diff --git a/player/js/elements/ShapeElement.js b/player/js/elements/ShapeElement.js
index 1c278ac..31e9051 100644
--- a/player/js/elements/ShapeElement.js
+++ b/player/js/elements/ShapeElement.js
@@ -184,7 +184,7 @@
             data[i] = {
                 transform : {
                     op: PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties),
-                    mProps: PropertyFactory.getProp(this,arr[i],2,null,dynamicProperties)
+                    mProps: new TransformProperty(this,arr[i], dynamicProperties)
                 },
                 elements: []
             };
diff --git a/player/js/elements/ShapeItemElement.js b/player/js/elements/ShapeItemElement.js
index f6f8371..db1f60f 100644
--- a/player/js/elements/ShapeItemElement.js
+++ b/player/js/elements/ShapeItemElement.js
@@ -111,7 +111,7 @@
                     matMdf:false,
                     opMdf:false,
                     op: PropertyFactory.getProp(this.elemData,arr[i].o,0,0.01,dynamicProperties),
-                    mProps: PropertyFactory.getProp(this.elemData,arr[i],2,null,dynamicProperties)
+                    mProps: new TransformProperty(this.elemData,arr[i], dynamicProperties)
                 },
                 elements: []
             };
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js
index c09a6dd..b411906 100644
--- a/player/js/elements/canvasElements/CVShapeElement.js
+++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -86,7 +86,7 @@
                     matMdf:false,
                     opMdf:false,
                     op: PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties),
-                    mProps: PropertyFactory.getProp(this,arr[i],2,null,dynamicProperties)
+                    mProps: new TransformProperty(this,arr[i], dynamicProperties)
                 },
                 elements: []
             };
diff --git a/player/js/elements/canvasElements/CVShapeItemElement.js b/player/js/elements/canvasElements/CVShapeItemElement.js
index 5069285..06b1101 100644
--- a/player/js/elements/canvasElements/CVShapeItemElement.js
+++ b/player/js/elements/canvasElements/CVShapeItemElement.js
@@ -72,7 +72,7 @@
                     matMdf:false,
                     opMdf:false,
                     op: PropertyFactory.getProp(this.elemData,arr[i].o,0,0.01,dynamicProperties),
-                    mProps: PropertyFactory.getProp(this.elemData,arr[i],2,null,dynamicProperties)
+                    mProps: new TransformProperty(this.elemData,arr[i], dynamicProperties)
                 },
                 elements: []
             };
diff --git a/player/js/elements/threejsElements/TBaseElement.js b/player/js/elements/threejsElements/TBaseElement.js
new file mode 100644
index 0000000..c7a4976
--- /dev/null
+++ b/player/js/elements/threejsElements/TBaseElement.js
@@ -0,0 +1,147 @@
+function TBaseElement(data,parentContainer,globalData,comp, placeholder){
+    this.globalData = globalData;
+    this.elementType = 'three';
+    this.comp = comp;
+    this.data = data;
+    this.matteElement = null;
+    this.parentContainer = parentContainer;
+    this.layerId = placeholder ? placeholder.layerId : 'ly_'+randomString(10);
+    this.placeholder = placeholder;
+    this.init();
+};
+
+createElement(BaseElement, TBaseElement);
+TBaseElement.prototype.checkBlendMode = function(){
+
+};
+TBaseElement.prototype.setBlendMode = BaseElement.prototype.setBlendMode;
+
+
+TBaseElement.prototype.getBaseElement = function(){
+    return this.baseElement;
+};
+
+TBaseElement.prototype.createElements = function(){
+    if(this.data.hasMask){
+        this.layerElement = document.createElementNS(svgNS,'svg');
+        styleDiv(this.layerElement);
+        //this.appendNodeToParent(this.layerElement);
+        this.baseElement = this.layerElement;
+        this.maskedElement = this.layerElement;
+    }else{
+        this.layerElement = this.parentContainer;
+    }
+    this.transformedElement = this.layerElement;
+    if(this.data.ln && (this.data.ty === 4 || this.data.ty === 0)){
+        if(this.layerElement === this.parentContainer){
+            this.layerElement = document.createElementNS(svgNS,'g');
+            //this.appendNodeToParent(this.layerElement);
+            this.baseElement = this.layerElement;
+        }
+        this.layerElement.setAttribute('id',this.data.ln);
+    }
+    this.setBlendMode();
+    if(this.layerElement !== this.parentContainer){
+        this.placeholder = null;
+    }
+    this.checkParenting();
+};
+
+TBaseElement.prototype.renderFrame = function(parentTransform){
+    if(this.data.ty === 3){
+        return false;
+    }
+
+    if(this.currentFrameNum === this.lastNum || !this.isVisible){
+        return this.isVisible;
+    }
+    this.lastNum = this.currentFrameNum;
+
+    this.finalTransform.opMdf = this.finalTransform.op.mdf;
+    this.finalTransform.matMdf = this.finalTransform.mProp.mdf;
+    this.finalTransform.opacity = this.finalTransform.op.v;
+    if(this.firstFrame){
+        this.finalTransform.opMdf = true;
+        this.finalTransform.matMdf = true;
+    }
+
+    var mat;
+    var finalMat = this.finalTransform.mat;
+
+    if(this.hierarchy){
+        var i, len = this.hierarchy.length;
+
+        mat = this.finalTransform.mProp.v.props;
+        finalMat.cloneFromProps(mat);
+        for(i=0;i<len;i+=1){
+            this.finalTransform.matMdf = this.hierarchy[i].finalTransform.mProp.mdf ? true : this.finalTransform.matMdf;
+            mat = this.hierarchy[i].finalTransform.mProp.v.props;
+            finalMat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],mat[12],mat[13],mat[14],mat[15]);
+        }
+    }else{
+        if(this.isVisible && this.finalTransform.matMdf){
+            if(!parentTransform){
+                finalMat.cloneFromProps(this.finalTransform.mProp.v.props);
+            }else{
+                mat = this.finalTransform.mProp.v.props;
+                finalMat.cloneFromProps(mat);
+            }
+        }
+    }
+    if(this.data.hasMask){
+        this.maskManager.renderFrame(finalMat);
+    }
+
+    if(parentTransform){
+        mat = parentTransform.mat.props;
+        finalMat.cloneFromProps(mat);
+        this.finalTransform.opacity *= parentTransform.opacity;
+        this.finalTransform.opMdf = parentTransform.opMdf ? true : this.finalTransform.opMdf;
+        this.finalTransform.matMdf = parentTransform.matMdf ? true : this.finalTransform.matMdf
+    }
+
+    if(this.finalTransform.matMdf){
+        var threeFinalMat = new Matrix();
+        threeFinalMat.translate(-this.globalData.compSize.w/2,-this.globalData.compSize.h/2,0);
+        mat = finalMat.props;
+        threeFinalMat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],mat[12],mat[13],mat[14],mat[15]);
+        this.finalMat = finalMat;
+    }
+    if(this.finalTransform.opMdf){
+        //this.transformedElement.style.opacity = this.finalTransform.opacity;
+    }
+    return this.isVisible;
+};
+
+TBaseElement.prototype.destroy = function(){
+    this.layerElement = null;
+    this.transformedElement = null;
+    this.parentContainer = null;
+    if(this.matteElement) {
+        this.matteElement = null;
+    }
+    if(this.maskManager) {
+        this.maskManager.destroy();
+        this.maskManager = null;
+    }
+};
+
+TBaseElement.prototype.getDomElement = function(){
+    return this.layerElement;
+};
+TBaseElement.prototype.addMasks = function(data){
+    this.maskManager = new MaskElement(data,this,this.globalData);
+};
+
+TBaseElement.prototype.hide = function(){
+};
+
+TBaseElement.prototype.addMasks = function(data){
+    this.maskManager = new TMaskElement(data,this,this.globalData);
+};
+
+TBaseElement.prototype.setMatte = function(){
+
+}
+
+TBaseElement.prototype.buildElementParenting = ThreejsRenderer.prototype.buildElementParenting;
\ No newline at end of file
diff --git a/player/js/elements/threejsElements/TCameraElement.js b/player/js/elements/threejsElements/TCameraElement.js
new file mode 100644
index 0000000..6cfa87c
--- /dev/null
+++ b/player/js/elements/threejsElements/TCameraElement.js
@@ -0,0 +1,119 @@
+function TCameraElement(data,parentContainer,globalData,comp, placeholder){
+    this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
+    this.pe = PropertyFactory.getProp(this,data.pe,0,0,this.dynamicProperties);
+    if(data.ks.p.s){
+        this.px = PropertyFactory.getProp(this,data.ks.p.x,1,0,this.dynamicProperties);
+        this.py = PropertyFactory.getProp(this,data.ks.p.y,1,0,this.dynamicProperties);
+        this.pz = PropertyFactory.getProp(this,data.ks.p.z,1,0,this.dynamicProperties);
+    }else{
+        this.p = PropertyFactory.getProp(this,data.ks.p,1,0,this.dynamicProperties);
+    }
+    if(data.ks.a){
+        this.a = PropertyFactory.getProp(this,data.ks.a,1,0,this.dynamicProperties);
+    }
+    if(data.ks.or.k.length && data.ks.or.k[0].to){
+        var i,len = data.ks.or.k.length;
+        for(i=0;i<len;i+=1){
+            data.ks.or.k[i].to = null;
+            data.ks.or.k[i].ti = null;
+        }
+    }
+    this.or = PropertyFactory.getProp(this,data.ks.or,1,degToRads,this.dynamicProperties);
+    this.or.sh = true;
+    this.rx = PropertyFactory.getProp(this,data.ks.rx,0,degToRads,this.dynamicProperties);
+    this.ry = PropertyFactory.getProp(this,data.ks.ry,0,degToRads,this.dynamicProperties);
+    this.rz = PropertyFactory.getProp(this,data.ks.rz,0,degToRads,this.dynamicProperties);
+    this.mat = new Matrix();
+
+    var vFOV = 2 * Math.atan( globalData.compSize.h / ( 2 * 1111 ) );
+    vFOV = vFOV * 180 / Math.PI;
+    //console.log('vFOV:', vFOV)
+    var camera = new THREE.PerspectiveCamera( vFOV, globalData.compSize.w / globalData.compSize.h, 1, 10000 );
+    camera.matrixAutoUpdate = false;
+    /*camera.position.x = 0;
+    camera.position.y = 0;*/
+    //camera.position.z = 1111;
+    this.threeCamera = camera;
+}
+createElement(TBaseElement, TCameraElement);
+
+TCameraElement.prototype.setup = function() {
+    var i, len = this.comp.threeDElements.length, comp;
+    for(i=0;i<len;i+=1){
+        //[perspectiveElem,container]
+        comp = this.comp.threeDElements[i];
+        comp.perspectiveElem.style.perspective = comp.perspectiveElem.style.webkitPerspective = this.pe.v+'px';
+        comp.container.style.transformOrigin = comp.container.style.mozTransformOrigin = comp.container.style.webkitTransformOrigin = "0px 0px 0px";
+        comp.perspectiveElem.style.transform = comp.perspectiveElem.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
+    }
+};
+
+TCameraElement.prototype.createElements = function(){
+};
+
+TCameraElement.prototype.hide = function(){
+};
+
+TCameraElement.prototype.renderFrame = function(){
+    var mdf = this.firstFrame;
+    var i, len;
+    if(this.hierarchy){
+        len = this.hierarchy.length;
+        for(i=0;i<len;i+=1){
+            mdf = this.hierarchy[i].finalTransform.mProp.mdf ? true : mdf;
+        }
+    }
+    if(mdf || (this.p && this.p.mdf) || (this.px && (this.px.mdf || this.py.mdf || this.pz.mdf)) || this.rx.mdf || this.ry.mdf || this.rz.mdf || this.or.mdf || (this.a && this.a.mdf)) {
+        this.mat.reset();
+        //this.mat.translate(-this.globalData.compSize.w/2,-this.globalData.compSize.h/2,0);
+
+        if(this.p){
+            this.mat.translate(this.p.v[0],-this.p.v[1],this.p.v[2]);
+        }else{
+            this.mat.translate(this.px.v,-this.py.v,this.pz.v);
+        }
+        if(this.a){
+            var diffVector = [this.p.v[0]-this.a.v[0],this.p.v[1]-this.a.v[1],this.p.v[2]-this.a.v[2]];
+            var mag = Math.sqrt(Math.pow(diffVector[0],2)+Math.pow(diffVector[1],2)+Math.pow(diffVector[2],2));
+            //var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v));
+            var lookDir = [diffVector[0]/mag,diffVector[1]/mag,diffVector[2]/mag];
+            var lookLengthOnXZ = Math.sqrt( lookDir[2]*lookDir[2] + lookDir[0]*lookDir[0] );
+            var m_rotationX = (Math.atan2( lookDir[1], lookLengthOnXZ ));
+            var m_rotationY = (Math.atan2( lookDir[0], -lookDir[2]));
+            this.mat.rotateY(m_rotationY).rotateX(-m_rotationX);
+
+        }
+        this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
+        this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]);
+        if(this.hierarchy){
+            var mat;
+            len = this.hierarchy.length;
+            for(i=0;i<len;i+=1){
+                mat = this.hierarchy[i].finalTransform.mProp.iv.props;
+                this.mat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],-mat[12],-mat[13],mat[14],mat[15]);
+            }
+        }
+    }
+    var mat = this.mat.props;
+    //console.log(this.globalData.compSize.w);
+    //console.log(mat);
+    /*this.threeCamera.matrix.set(mat[0],mat[1],mat[2],mat[3]
+        ,mat[4],mat[5],mat[6],mat[7]
+        ,mat[8],mat[9],mat[10],mat[11]
+        ,mat[12],mat[13],mat[14],mat[15]);
+    this.threeCamera.updateMatrixWorld( true );*/
+    /*this.threeCamera.matrix.set(1,0,0,_count
+        ,0,1,0,0
+        ,0,0,1, 1111
+        ,0,0,0, 1);*/
+    //console.log('mat:', mat);
+    this.threeCamera.matrix.set(mat[0],mat[4],mat[8],mat[12]
+        ,mat[1],mat[5],mat[9],mat[13]
+        ,mat[2],mat[6],mat[10], -mat[14]
+        ,mat[3],mat[7],mat[11], mat[15]);
+    this.threeCamera.updateMatrixWorld( true );
+    this.firstFrame = false;
+};
+
+TCameraElement.prototype.destroy = function(){
+};
\ No newline at end of file
diff --git a/player/js/elements/threejsElements/TImageElement.js b/player/js/elements/threejsElements/TImageElement.js
new file mode 100644
index 0000000..9a5aa24
--- /dev/null
+++ b/player/js/elements/threejsElements/TImageElement.js
@@ -0,0 +1,66 @@
+function TImageElement(data,parentContainer,globalData,comp, placeholder){
+    this.threeMatrix = new THREE.Matrix4();
+    this.assetData = globalData.getAssetData(data.refId);
+    this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
+}
+createElement(TBaseElement, TImageElement);
+
+TImageElement.prototype.createElements = function(){
+
+    var assetPath = this.globalData.getAssetsPath(this.assetData);
+    var img = new Image();
+    ////
+    var squareShape = new THREE.Shape();
+     squareShape.moveTo( 0,0 );
+     squareShape.lineTo( 0, 50 );
+     squareShape.lineTo( 20, 80 );
+     squareShape.lineTo( 50, 50 );
+     squareShape.lineTo( 0, 0 );
+     var geometry = new THREE.Geometry();
+    var shapePoints = squareShape.extractPoints();
+    var faces = THREE.ShapeUtils.triangulateShape(shapePoints.shape, shapePoints.holes);
+    for (var i = 0; i < shapePoints.shape.length; i++) {
+        geometry.vertices.push(new THREE.Vector3(shapePoints.shape[i].x, 0, shapePoints.shape[i].y));
+    }
+    for (var i = 0; i < faces.length ; i++) {
+        var a = faces[i][2] , b = faces[i][1] , c = faces[i][0] ;
+        var v1 = shapePoints.shape[a], v2 = shapePoints.shape[b], v3 = shapePoints.shape[c];
+
+        geometry.faces.push( new THREE.Face3(a, b, c) );    
+        geometry.faceVertexUvs[0].push(
+            [ new THREE.Vector2(v1.x ,v1.y ), new THREE.Vector2(v2.x, v2.y), new THREE.Vector2(v3.x, v3.y)]);
+    }
+    //geometry.computeCentroids();
+    //geometry.computeFaceNormals();
+    ////
+
+    //var geometry = new THREE.PlaneGeometry( this.assetData.w, this.assetData.h, 32 );
+    //this.threeMatrix.makeTranslation(this.assetData.w/2, -this.assetData.h/2,0);
+    //geometry.applyMatrix(this.threeMatrix);
+    //geometry.center();
+    var texture = THREE.ImageUtils.loadTexture(assetPath);
+    
+
+    b|SA":L|>nbzxbb======ju5//-var material = new THREE.MeshBasicMaterial({map: texture}); /n
+    var material = new THREE.MeshBasicMaterial( {color: '#ff0000', side: THREE.DoubleSide} );
+    var plane = new THREE.Mesh( geometry, material );
+    plane.matrixAutoUpdate = false;
+    this.layerElement = plane;
+    this.transformedElement = plane;
+    this.baseElement = plane;
+    this.innerElem = plane;
+    if(this.data.hasMask){
+        this.maskedElement = plane;
+    }
+
+    img.onload = function(){
+        console.log('loaded')
+    }
+    img.src = assetPath;
+    this.checkParenting();
+};
+
+TImageElement.prototype.renderTransformFrame = TSolidElement.prototype.renderTransformFrame;
+TImageElement.prototype.hide = TSolidElement.prototype.hide;
+TImageElement.prototype.renderFrame = TSolidElement.prototype.renderFrame;
+TImageElement.prototype.destroy = TSolidElement.prototype.destroy;
\ No newline at end of file
diff --git a/player/js/elements/threejsElements/TMaskElement.js b/player/js/elements/threejsElements/TMaskElement.js
new file mode 100644
index 0000000..0c3856b
--- /dev/null
+++ b/player/js/elements/threejsElements/TMaskElement.js
@@ -0,0 +1,81 @@
+
+function TMaskElement(data,element){
+    this.data = data;
+    this.element = element;
+    this.dynamicProperties = [];
+    this.masksProperties = this.data.masksProperties;
+    this.viewData = new Array(this.masksProperties.length);
+    var i, len = this.masksProperties.length;
+    for (i = 0; i < len; i++) {
+        this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element,this.masksProperties[i],3,this.dynamicProperties,null);
+    }
+}
+
+TMaskElement.prototype.getMaskProperty = function(pos){
+    return this.viewData[pos];
+};
+
+TMaskElement.prototype.prepareFrame = function(num){
+    var i, len = this.dynamicProperties.length;
+    for(i=0;i<len;i+=1){
+        this.dynamicProperties[i].getValue(num);
+        if(this.dynamicProperties[i].mdf){
+            this.element.globalData.mdf = true;
+        }
+    }
+};
+
+TMaskElement.prototype.renderFrame = function (transform) {
+    /*var ctx = this.element.canvasContext;
+    var i, len = this.data.masksProperties.length;
+    var pt,pt2,pt3,data, hasMasks = false;
+    for (i = 0; i < len; i++) {
+        if(this.masksProperties[i].mode === 'n'){
+            continue;
+        }
+        if(hasMasks === false){
+            ctx.beginPath();
+            hasMasks = true;
+        }
+        if (this.masksProperties[i].inv) {
+            ctx.moveTo(0, 0);
+            ctx.lineTo(this.element.globalData.compWidth, 0);
+            ctx.lineTo(this.element.globalData.compWidth, this.element.globalData.compHeight);
+            ctx.lineTo(0, this.element.globalData.compHeight);
+            ctx.lineTo(0, 0);
+        }
+        data = this.viewData[i].v;
+        pt = transform ? transform.applyToPointArray(data.v[0][0],data.v[0][1],0):data.v[0];
+        ctx.moveTo(pt[0], pt[1]);
+        var j, jLen = data._length;
+        for (j = 1; j < jLen; j++) {
+            pt = transform ? transform.applyToPointArray(data.o[j - 1][0],data.o[j - 1][1],0) : data.o[j - 1];
+            pt2 = transform ? transform.applyToPointArray(data.i[j][0],data.i[j][1],0) : data.i[j];
+            pt3 = transform ? transform.applyToPointArray(data.v[j][0],data.v[j][1],0) : data.v[j];
+            ctx.bezierCurveTo(pt[0], pt[1], pt2[0], pt2[1], pt3[0], pt3[1]);
+        }
+        pt = transform ? transform.applyToPointArray(data.o[j - 1][0],data.o[j - 1][1],0) : data.o[j - 1];
+        pt2 = transform ? transform.applyToPointArray(data.i[0][0],data.i[0][1],0) : data.i[0];
+        pt3 = transform ? transform.applyToPointArray(data.v[0][0],data.v[0][1],0) : data.v[0];
+        ctx.bezierCurveTo(pt[0], pt[1], pt2[0], pt2[1], pt3[0], pt3[1]);
+    }
+    if(hasMasks){
+        ctx.clip();
+    }*/
+};
+
+TMaskElement.prototype.getMask = function(nm){
+    var i = 0, len = this.masksProperties.length;
+    while(i<len){
+        if(this.masksProperties[i].nm === nm){
+            return {
+                maskPath: this.viewData[i].pv
+            }
+        }
+        i += 1;
+    }
+};
+
+TMaskElement.prototype.destroy = function(){
+    this.element = null;
+};
\ No newline at end of file
diff --git a/player/js/elements/threejsElements/TSolidElement.js b/player/js/elements/threejsElements/TSolidElement.js
new file mode 100644
index 0000000..8f68b9e
--- /dev/null
+++ b/player/js/elements/threejsElements/TSolidElement.js
@@ -0,0 +1,55 @@
+function TSolidElement(data,parentContainer,globalData,comp, placeholder){
+    this.threeMatrix = new THREE.Matrix4();
+    this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);
+}
+createElement(TBaseElement, TSolidElement);
+
+TSolidElement.prototype.createElements = function(){
+
+    var geometry = new THREE.PlaneGeometry( this.data.sw, this.data.sh, 32 );
+    this.threeMatrix.makeTranslation(this.data.sw/2, -this.data.sh/2,0);
+    geometry.applyMatrix(this.threeMatrix);
+    //geometry.center();
+    var material = new THREE.MeshBasicMaterial( {color: this.data.sc, side: THREE.DoubleSide} );
+    var plane = new THREE.Mesh( geometry, material );
+    plane.matrixAutoUpdate = false;
+    
+    this.layerElement = plane;
+    this.transformedElement = plane;
+    //this.appendNodeToParent(parent);
+    this.baseElement = plane;
+    this.innerElem = plane;
+    if(this.data.bm !== 0){
+        this.setBlendMode();
+    }
+    if(this.data.hasMask){
+        this.maskedElement = plane;
+    }
+    this.checkParenting();
+};
+
+TSolidElement.prototype.renderTransformFrame = TBaseElement.prototype.renderFrame;
+
+TSolidElement.prototype.renderFrame = function() {
+    this.renderTransformFrame();
+    //console.log(this.finalMat);
+    //console.log(this.layerElement.geometry);
+    var props = this.finalMat.props;
+    //console.log(props);
+    /*this.threeMatrix.set(props[0],props[1],props[2],props[3],
+        props[4],props[5],props[6],props[7],
+        props[8],props[9],props[10],props[11],
+        0.1,0,0,props[15])*/
+    //this.threeMatrix.identity();
+    this.layerElement.matrix.set(props[0],props[4],props[8],props[12],
+                        props[1],props[5],props[9],props[13],
+                        props[2],props[6],props[10],props[14],
+                        props[3],props[7],props[11],props[15]);
+
+    this.layerElement.updateMatrixWorld( true );
+}
+
+
+
+TSolidElement.prototype.hide = IImageElement.prototype.hide;
+TSolidElement.prototype.destroy = IImageElement.prototype.destroy;
\ No newline at end of file
diff --git a/player/js/renderers/ThreejsRenderer.js b/player/js/renderers/ThreejsRenderer.js
new file mode 100644
index 0000000..1c60595
--- /dev/null
+++ b/player/js/renderers/ThreejsRenderer.js
@@ -0,0 +1,119 @@
+function ThreejsRenderer(animationItem, config){
+    this.animationItem = animationItem;
+    this.layers = null;
+    this.renderedFrame = -1;
+    this.globalData = {
+        frameNum: -1
+    };
+    this.pendingElements = [];
+    this.elements = [];
+    this.threeDElements = [];
+    this.destroyed = false;
+    this.camera = null;
+    this.supports3d = true;
+}
+
+extendPrototype(BaseRenderer,ThreejsRenderer);
+ThreejsRenderer.prototype.buildItem = SVGRenderer.prototype.buildItem;
+
+ThreejsRenderer.prototype.checkPendingElements  = function(){
+    while(this.pendingElements.length){
+        var element = this.pendingElements.pop();
+        element.checkParenting();
+    }
+};
+
+ThreejsRenderer.prototype.appendElementInPos = function(element, pos){
+    var newElement = element.getBaseElement();
+    if(!newElement){
+        return;
+    }
+    var layer = this.layers[pos];
+    if(!layer.ddd || !this.supports3d){
+        var i = 0;
+        var nextElement;
+        while(i<pos){
+            if(this.elements[i] && this.elements[i]!== true && this.elements[i].getBaseElement){
+                nextElement = this.elements[i].getBaseElement();
+            }
+            i += 1;
+        }
+        if(nextElement){
+            if(!layer.ddd || !this.supports3d){
+                this.layerElement.insertBefore(newElement, nextElement);
+            }
+        } else {
+            if(!layer.ddd || !this.supports3d){
+                this.layerElement.appendChild(newElement);
+            }
+        }
+    } else {
+        this.scene.add( newElement );
+    }
+};
+
+ThreejsRenderer.prototype.createSolid = function (data) {
+    return new TSolidElement(data, this.layerElement,this.globalData,this);
+};
+
+ThreejsRenderer.prototype.createImage = function (data) {
+    return new TImageElement(data, this.layerElement,this.globalData,this);
+};
+
+ThreejsRenderer.prototype.createCamera = function (data) {
+    this.camera = new TCameraElement(data, this.layerElement,this.globalData,this);
+    return this.camera;
+};
+
+ThreejsRenderer.prototype.configAnimation = function(animData){
+    var wrapper = this.animationItem.wrapper;
+    var scene = new THREE.Scene();
+    var renderer = new THREE.WebGLRenderer();
+    renderer.setSize( animData.w, animData.h );
+    wrapper.appendChild( renderer.domElement );
+
+    var svg = document.createElementNS(svgNS,'svg');
+    svg.setAttribute('width','1');
+    svg.setAttribute('height','1');
+    styleDiv(svg);
+    wrapper.appendChild(svg);
+    var defs = document.createElementNS(svgNS,'defs');
+    svg.appendChild(defs);
+    this.globalData.defs = defs;
+    this.data = animData;
+    //Mask animation
+    this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
+    this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
+    this.globalData.elementLoaded = this.animationItem.elementLoaded.bind(this.animationItem);
+    this.globalData.frameId = 0;
+    this.globalData.compSize = {
+        w: animData.w,
+        h: animData.h
+    };
+    this.globalData.frameRate = animData.fr;
+    this.layers = animData.layers;
+    this.globalData.fontManager = new FontManager();
+    this.globalData.fontManager.addChars(animData.chars);
+    this.globalData.fontManager.addFonts(animData.fonts,svg);
+    this.scene = scene;
+    this.renderer = renderer;
+};
+
+ThreejsRenderer.prototype._renderLayersFrame = SVGRenderer.prototype.renderFrame;
+ThreejsRenderer.prototype.renderFrame = function(num) {
+    this._renderLayersFrame(num);
+    //this.scene.updateMatrixWorld( true );
+    this.renderer.render(this.scene, this.camera.threeCamera);
+}
+
+ThreejsRenderer.prototype.searchExtraCompositions = function(assets){
+    var i, len = assets.length;
+    var floatingContainer = document.createElement('div');
+    for(i=0;i<len;i+=1){
+        if(assets[i].xt){
+            var comp = this.createComp(assets[i],floatingContainer,this.globalData.comp,null);
+            comp.initExpressions();
+            this.globalData.projectInterface.registerComposition(comp);
+        }
+    }
+};
\ No newline at end of file
diff --git a/player/js/utils/FontManager.js b/player/js/utils/FontManager.js
index 21fa53e..53503eb 100644
--- a/player/js/utils/FontManager.js
+++ b/player/js/utils/FontManager.js
@@ -96,7 +96,6 @@
         var tCanvasHelper = document.createElement('canvas').getContext('2d');
         tCanvasHelper.font = '100px '+ fontData.fFamily;
         return tCanvasHelper;
-        return tHelper;
     }
 
     function addFonts(fontData, defs){
diff --git a/player/js/utils/PropertyFactory.js b/player/js/utils/PropertyFactory.js
index 40ba8fa..d6a1f0e 100644
--- a/player/js/utils/PropertyFactory.js
+++ b/player/js/utils/PropertyFactory.js
@@ -263,238 +263,7 @@
         this.lastFrame = initFrame;
     }
 
-    var TransformProperty = (function() {
-        function positionGetter() {
-            return ExpressionValue(this.p);
-        }
-        function xPositionGetter() {
-            return ExpressionValue(this.px);
-        }
-        function yPositionGetter() {
-            return ExpressionValue(this.py);
-        }
-        function zPositionGetter() {
-            return ExpressionValue(this.pz);
-        }
-        function anchorGetter() {
-            return ExpressionValue(this.a);
-        }
-        function orientationGetter() {
-            return ExpressionValue(this.or);
-        }
-        function rotationGetter() {
-            return ExpressionValue(this.r, 1/degToRads);
-        }
-        function scaleGetter() {
-            return ExpressionValue(this.s, 100);
-        }
-        function opacityGetter() {
-            return ExpressionValue(this.o, 100);
-        }
-        function skewGetter() {
-            return ExpressionValue(this.sk);
-        }
-        function skewAxisGetter() {
-            return ExpressionValue(this.sa);
-        }
-        function applyToMatrix(mat) {
-            var i, len = this.dynamicProperties.length;
-            for(i = 0; i < len; i += 1) {
-                this.dynamicProperties[i].getValue();
-                if (this.dynamicProperties[i].mdf) {
-                    this.mdf = true;
-                }
-            }
-            if (this.a) {
-                mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
-            }
-            if (this.s) {
-                mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
-            }
-            if (this.r) {
-                mat.rotate(-this.r.v);
-            } else {
-                mat.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
-            }
-            if (this.data.p.s) {
-                if (this.data.p.z) {
-                    mat.translate(this.px.v, this.py.v, -this.pz.v);
-                } else {
-                    mat.translate(this.px.v, this.py.v, 0);
-                }
-            } else {
-                mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);
-            }
-        }
-        function processKeys(){
-            if (this.elem.globalData.frameId === this.frameId) {
-                return;
-            }
-
-            this.mdf = false;
-            var i, len = this.dynamicProperties.length;
-
-            for(i = 0; i < len; i += 1) {
-                this.dynamicProperties[i].getValue();
-                if (this.dynamicProperties[i].mdf) {
-                    this.mdf = true;
-                }
-            }
-            if (this.mdf) {
-                this.v.reset();
-                if (this.a) {
-                    this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
-                }
-                if(this.s) {
-                    this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
-                }
-                if (this.sk) {
-                    this.v.skewFromAxis(-this.sk.v, this.sa.v);
-                }
-                if (this.r) {
-                    this.v.rotate(-this.r.v);
-                } else {
-                    this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
-                }
-                if (this.autoOriented && this.p.keyframes && this.p.getValueAtTime) {
-                    var v1,v2;
-                    if (this.p.lastFrame+this.p.offsetTime <= this.p.keyframes[0].t) {
-                        v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / this.elem.globalData.frameRate,0);
-                        v2 = this.p.getValueAtTime(this.p.keyframes[0].t / this.elem.globalData.frameRate, 0);
-                    } else if(this.p.lastFrame+this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) {
-                        v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / this.elem.globalData.frameRate), 0);
-                        v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.01) / this.elem.globalData.frameRate, 0);
-                    } else {
-                        v1 = this.p.pv;
-                        v2 = this.p.getValueAtTime((this.p.lastFrame+this.p.offsetTime - 0.01) / this.elem.globalData.frameRate, this.p.offsetTime);
-                    }
-                    this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0]));
-                }
-                if(this.data.p.s){
-                    if(this.data.p.z) {
-                        this.v.translate(this.px.v, this.py.v, -this.pz.v);
-                    } else {
-                        this.v.translate(this.px.v, this.py.v, 0);
-                    }
-                }else{
-                    this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
-                }
-            }
-            //console.log(this.v.to2dCSS())
-            this.frameId = this.elem.globalData.frameId;
-        }
-
-        function setInverted(){
-            this.inverted = true;
-            this.iv = new Matrix();
-            if(!this.k){
-                if(this.data.p.s){
-                    this.iv.translate(this.px.v,this.py.v,-this.pz.v);
-                }else{
-                    this.iv.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
-                }
-                if(this.r){
-                    this.iv.rotate(-this.r.v);
-                }else{
-                    this.iv.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
-                }
-                if(this.s){
-                    this.iv.scale(this.s.v[0],this.s.v[1],1);
-                }
-                if(this.a){
-                    this.iv.translate(-this.a.v[0],-this.a.v[1],this.a.v[2]);
-                }
-            }
-        }
-
-        function autoOrient(){
-            //
-            //var prevP = this.getValueAtTime();
-        }
-
-        return function TransformProperty(elem,data,arr){
-            this.elem = elem;
-            this.frameId = -1;
-            this.type = 'transform';
-            this.dynamicProperties = [];
-            this.mdf = false;
-            this.data = data;
-            this.getValue = processKeys;
-            this.applyToMatrix = applyToMatrix;
-            this.setInverted = setInverted;
-            this.autoOrient = autoOrient;
-            this.v = new Matrix();
-            if(data.p.s){
-                this.px = PropertyFactory.getProp(elem,data.p.x,0,0,this.dynamicProperties);
-                this.py = PropertyFactory.getProp(elem,data.p.y,0,0,this.dynamicProperties);
-                if(data.p.z){
-                    this.pz = PropertyFactory.getProp(elem,data.p.z,0,0,this.dynamicProperties);
-                }
-            }else{
-                this.p = PropertyFactory.getProp(elem,data.p,1,0,this.dynamicProperties);
-            }
-            if(data.r) {
-                this.r = PropertyFactory.getProp(elem, data.r, 0, degToRads, this.dynamicProperties);
-            } else if(data.rx) {
-                this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this.dynamicProperties);
-                this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this.dynamicProperties);
-                this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this.dynamicProperties);
-                this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this.dynamicProperties);
-            }
-            if(data.sk){
-                this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this.dynamicProperties);
-                this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this.dynamicProperties);
-            }
-            if(data.a) {
-                this.a = PropertyFactory.getProp(elem,data.a,1,0,this.dynamicProperties);
-            }
-            if(data.s) {
-                this.s = PropertyFactory.getProp(elem,data.s,1,0.01,this.dynamicProperties);
-            }
-            if(data.o){
-                this.o = PropertyFactory.getProp(elem,data.o,0,0.01,arr);
-            } else {
-                this.o = {mdf:false,v:1};
-            }
-            if(this.dynamicProperties.length){
-                arr.push(this);
-            }else{
-                if(this.a){
-                    this.v.translate(-this.a.v[0],-this.a.v[1],this.a.v[2]);
-                }
-                if(this.s){
-                    this.v.scale(this.s.v[0],this.s.v[1],this.s.v[2]);
-                }
-                if(this.sk){
-                    this.v.skewFromAxis(-this.sk.v,this.sa.v);
-                }
-                if(this.r){
-                    this.v.rotate(-this.r.v);
-                }else{
-                    this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
-                }
-                if(this.data.p.s){
-                    if(data.p.z) {
-                        this.v.translate(this.px.v, this.py.v, -this.pz.v);
-                    } else {
-                        this.v.translate(this.px.v, this.py.v, 0);
-                    }
-                }else{
-                    this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
-                }
-            }
-            Object.defineProperty(this, "position", { get: positionGetter});
-            Object.defineProperty(this, "xPosition", { get: xPositionGetter});
-            Object.defineProperty(this, "yPosition", { get: yPositionGetter});
-            Object.defineProperty(this, "orientation", { get: orientationGetter});
-            Object.defineProperty(this, "anchorPoint", { get: anchorGetter});
-            Object.defineProperty(this, "rotation", { get: rotationGetter});
-            Object.defineProperty(this, "scale", { get: scaleGetter});
-            Object.defineProperty(this, "opacity", { get: opacityGetter});
-            Object.defineProperty(this, "skew", { get: skewGetter});
-            Object.defineProperty(this, "skewAxis", { get: skewAxisGetter});
-        }
-    }());
+    
 
     function getProp(elem,data,type, mult, arr) {
         var p;
diff --git a/player/js/utils/TransformProperty.js b/player/js/utils/TransformProperty.js
new file mode 100644
index 0000000..deaac36
--- /dev/null
+++ b/player/js/utils/TransformProperty.js
@@ -0,0 +1,233 @@
+var TransformProperty = (function() {
+    function positionGetter() {
+        return ExpressionValue(this.p);
+    }
+    function xPositionGetter() {
+        return ExpressionValue(this.px);
+    }
+    function yPositionGetter() {
+        return ExpressionValue(this.py);
+    }
+    function zPositionGetter() {
+        return ExpressionValue(this.pz);
+    }
+    function anchorGetter() {
+        return ExpressionValue(this.a);
+    }
+    function orientationGetter() {
+        return ExpressionValue(this.or);
+    }
+    function rotationGetter() {
+        return ExpressionValue(this.r, 1/degToRads);
+    }
+    function scaleGetter() {
+        return ExpressionValue(this.s, 100);
+    }
+    function opacityGetter() {
+        return ExpressionValue(this.o, 100);
+    }
+    function skewGetter() {
+        return ExpressionValue(this.sk);
+    }
+    function skewAxisGetter() {
+        return ExpressionValue(this.sa);
+    }
+    function applyToMatrix(mat) {
+        var i, len = this.dynamicProperties.length;
+        for(i = 0; i < len; i += 1) {
+            this.dynamicProperties[i].getValue();
+            if (this.dynamicProperties[i].mdf) {
+                this.mdf = true;
+            }
+        }
+        if (this.a) {
+            mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
+        }
+        if (this.s) {
+            mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
+        }
+        if (this.r) {
+            mat.rotate(-this.r.v);
+        } else {
+            mat.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
+        }
+        if (this.data.p.s) {
+            if (this.data.p.z) {
+                mat.translate(this.px.v, this.py.v, -this.pz.v);
+            } else {
+                mat.translate(this.px.v, this.py.v, 0);
+            }
+        } else {
+            mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]);
+        }
+    }
+    function processKeys(){
+        if (this.elem.globalData.frameId === this.frameId) {
+            return;
+        }
+
+        this.mdf = false;
+        var i, len = this.dynamicProperties.length;
+
+        for(i = 0; i < len; i += 1) {
+            this.dynamicProperties[i].getValue();
+            if (this.dynamicProperties[i].mdf) {
+                this.mdf = true;
+            }
+        }
+        if (this.mdf) {
+            this.v.reset();
+            if (this.a) {
+                if(this.inverted){
+                    this.v.translate(-this.a.v[0], this.a.v[1], this.a.v[2]);
+                } else {
+                    this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
+                }
+            }
+            if(this.s) {
+                this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]);
+            }
+            if (this.sk) {
+                this.v.skewFromAxis(-this.sk.v, this.sa.v);
+            }
+            if (this.r) {
+                this.v.rotate(-this.r.v);
+            } else {
+                if(this.inverted){
+                    this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(-this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
+                } else {
+                    this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
+                }
+            }
+            if (this.autoOriented && this.p.keyframes && this.p.getValueAtTime) {
+                var v1,v2;
+                if (this.p.lastFrame+this.p.offsetTime <= this.p.keyframes[0].t) {
+                    v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / this.elem.globalData.frameRate,0);
+                    v2 = this.p.getValueAtTime(this.p.keyframes[0].t / this.elem.globalData.frameRate, 0);
+                } else if(this.p.lastFrame+this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) {
+                    v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / this.elem.globalData.frameRate), 0);
+                    v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.01) / this.elem.globalData.frameRate, 0);
+                } else {
+                    v1 = this.p.pv;
+                    v2 = this.p.getValueAtTime((this.p.lastFrame+this.p.offsetTime - 0.01) / this.elem.globalData.frameRate, this.p.offsetTime);
+                }
+                this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0]));
+            }
+            if(this.data.p.s){
+                if(this.data.p.z) {
+                    this.v.translate(this.px.v, this.py.v, -this.pz.v);
+                } else {
+                    this.v.translate(this.px.v, this.py.v, 0);
+                }
+            }else{
+                if(this.inverted){
+                    this.v.translate(this.p.v[0],-this.p.v[1],-this.p.v[2]);
+                } else {
+                    this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
+                }
+                
+            }
+        }
+        this.frameId = this.elem.globalData.frameId;
+    }
+
+    function autoOrient(){
+        //
+        //var prevP = this.getValueAtTime();
+    }
+
+    return function TransformProperty(elem,data,arr,inverted){
+        this.elem = elem;
+        this.inverted = inverted || false;
+        this.frameId = -1;
+        this.type = 'transform';
+        this.dynamicProperties = [];
+        this.mdf = false;
+        this.data = data;
+        this.getValue = processKeys;
+        this.applyToMatrix = applyToMatrix;
+        this.autoOrient = autoOrient;
+        this.v = new Matrix();
+        if(data.p.s){
+            this.px = PropertyFactory.getProp(elem,data.p.x,0,0,this.dynamicProperties);
+            this.py = PropertyFactory.getProp(elem,data.p.y,0,0,this.dynamicProperties);
+            if(data.p.z){
+                this.pz = PropertyFactory.getProp(elem,data.p.z,0,0,this.dynamicProperties);
+            }
+        }else{
+            this.p = PropertyFactory.getProp(elem,data.p,1,0,this.dynamicProperties);
+        }
+        if(data.r) {
+            this.r = PropertyFactory.getProp(elem, data.r, 0, degToRads, this.dynamicProperties);
+        } else if(data.rx) {
+            this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this.dynamicProperties);
+            this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this.dynamicProperties);
+            this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this.dynamicProperties);
+            this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this.dynamicProperties);
+        }
+        if(data.sk){
+            this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this.dynamicProperties);
+            this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this.dynamicProperties);
+        }
+        if(data.a) {
+            this.a = PropertyFactory.getProp(elem,data.a,1,0,this.dynamicProperties);
+        }
+        if(data.s) {
+            this.s = PropertyFactory.getProp(elem,data.s,1,0.01,this.dynamicProperties);
+        }
+        if(data.o){
+            this.o = PropertyFactory.getProp(elem,data.o,0,0.01,arr);
+        } else {
+            this.o = {mdf:false,v:1};
+        }
+        if(this.dynamicProperties.length){
+            arr.push(this);
+        }else{
+            if(this.a){
+                if(this.inverted){
+                    this.v.translate(-this.a.v[0], this.a.v[1], this.a.v[2]);
+                } else {
+                    this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]);
+                }
+            }
+            if(this.s){
+                this.v.scale(this.s.v[0],this.s.v[1],this.s.v[2]);
+            }
+            if(this.sk){
+                this.v.skewFromAxis(-this.sk.v,this.sa.v);
+            }
+            if(this.r){
+                this.v.rotate(-this.r.v);
+            }else{
+                if(this.inverted){
+                    this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(-this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
+                } else {
+                    this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]);
+                }
+            }
+            if(this.data.p.s){
+                if(data.p.z) {
+                    this.v.translate(this.px.v, this.py.v, -this.pz.v);
+                } else {
+                    this.v.translate(this.px.v, this.py.v, 0);
+                }
+            }else{
+                if(this.inverted){
+                    this.v.translate(this.p.v[0],-this.p.v[1],-this.p.v[2]);
+                } else {
+                    this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]);
+                }
+            }
+        }
+        Object.defineProperty(this, "position", { get: positionGetter});
+        Object.defineProperty(this, "xPosition", { get: xPositionGetter});
+        Object.defineProperty(this, "yPosition", { get: yPositionGetter});
+        Object.defineProperty(this, "orientation", { get: orientationGetter});
+        Object.defineProperty(this, "anchorPoint", { get: anchorGetter});
+        Object.defineProperty(this, "rotation", { get: rotationGetter});
+        Object.defineProperty(this, "scale", { get: scaleGetter});
+        Object.defineProperty(this, "opacity", { get: opacityGetter});
+        Object.defineProperty(this, "skew", { get: skewGetter});
+        Object.defineProperty(this, "skewAxis", { get: skewAxisGetter});
+    }
+}());
\ No newline at end of file
diff --git a/player/js/utils/common.js b/player/js/utils/common.js
index 05a3632..a5452f0 100644
--- a/player/js/utils/common.js
+++ b/player/js/utils/common.js
@@ -1,4 +1,4 @@
-var subframeEnabled = true;
+var subframeEnabled = false;
 var expressionsPlugin;
 var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 var cachedColors = {};
diff --git a/player/js/utils/shapes/RepeaterModifier.js b/player/js/utils/shapes/RepeaterModifier.js
index 87cb7cc..37582f9 100644
--- a/player/js/utils/shapes/RepeaterModifier.js
+++ b/player/js/utils/shapes/RepeaterModifier.js
@@ -19,7 +19,7 @@
     this.getValue = this.processKeys;
     this.c = PropertyFactory.getProp(elem,data.c,0,null,this.dynamicProperties);
     this.o = PropertyFactory.getProp(elem,data.o,0,null,this.dynamicProperties);
-    this.tr = PropertyFactory.getProp(elem,data.tr,2,null,this.dynamicProperties);
+    this.tr = new TransformProperty(elem,data.tr, this.dynamicProperties);
     if(!this.dynamicProperties.length){
         this.getValue(true);
     }