Merge branch 'master' of github.com:bodymovin/bodymovin
diff --git a/README.md b/README.md
index 1703a49..829e6e2 100644
--- a/README.md
+++ b/README.md
@@ -214,7 +214,8 @@
scaleMode: 'noScale',
clearCanvas: false,
progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
- hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
+ hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
+ className: 'some-css-class-name'
}
});
```
@@ -287,4 +288,4 @@
- gzipping the animation jsons and the player have a huge reduction on the filesize. I recommend doing it if you use it for a project.
## Issues
-- For missing mask in Safari browser, please anim.setLocationHref(locationHref) before animation is generated. It usually caused by usage of base tag in html. (see above for description of setLocationHref)
\ No newline at end of file
+- For missing mask in Safari browser, please anim.setLocationHref(locationHref) before animation is generated. It usually caused by usage of base tag in html. (see above for description of setLocationHref)
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 2c4ca28..6609da1 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -4,7 +4,8 @@
clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
context: (config && config.context) || null,
progressiveLoad: (config && config.progressiveLoad) || false,
- preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet'
+ preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
+ className: (config && config.className) || ''
};
this.renderConfig.dpr = (config && config.dpr) || 1;
if (this.animationItem.wrapper) {
@@ -144,6 +145,9 @@
this.animationItem.container.style.transformOrigin = this.animationItem.container.style.mozTransformOrigin = this.animationItem.container.style.webkitTransformOrigin = this.animationItem.container.style['-webkit-transform'] = "0px 0px 0px";
this.animationItem.wrapper.appendChild(this.animationItem.container);
this.canvasContext = this.animationItem.container.getContext('2d');
+ if(this.renderConfig.className) {
+ this.animationItem.container.setAttribute('class', this.renderConfig.className);
+ }
}else{
this.canvasContext = this.renderConfig.context;
}
@@ -341,4 +345,4 @@
this.globalData.projectInterface.registerComposition(comp);
}
}
-};
\ No newline at end of file
+};
diff --git a/player/js/renderers/HybridRenderer.js b/player/js/renderers/HybridRenderer.js
index 23cf544..6de314b 100644
--- a/player/js/renderers/HybridRenderer.js
+++ b/player/js/renderers/HybridRenderer.js
@@ -1,10 +1,13 @@
-function HybridRenderer(animationItem){
+function HybridRenderer(animationItem, config){
this.animationItem = animationItem;
this.layers = null;
this.renderedFrame = -1;
this.globalData = {
frameNum: -1
};
+ this.renderConfig = {
+ className: (config && config.className) || ''
+ };
this.pendingElements = [];
this.elements = [];
this.threeDElements = [];
@@ -178,6 +181,9 @@
this.resizerElem = resizerElem;
styleDiv(resizerElem);
resizerElem.style.transformStyle = resizerElem.style.webkitTransformStyle = resizerElem.style.mozTransformStyle = "flat";
+ if(this.renderConfig.className) {
+ wrapper.setAttribute('class', this.renderConfig.className);
+ }
wrapper.appendChild(resizerElem);
resizerElem.style.overflow = 'hidden';
@@ -276,4 +282,4 @@
this.globalData.projectInterface.registerComposition(comp);
}
}
-};
\ No newline at end of file
+};
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 3657c89..1d075cb 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -9,7 +9,8 @@
preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
progressiveLoad: (config && config.progressiveLoad) || false,
hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true,
- viewBoxOnly: (config && config.viewBoxOnly) || false
+ viewBoxOnly: (config && config.viewBoxOnly) || false,
+ className: (config && config.className) || ''
};
this.globalData.renderConfig = this.renderConfig;
this.elements = [];
@@ -56,6 +57,9 @@
this.layerElement.style.width = '100%';
this.layerElement.style.height = '100%';
}
+ if(this.renderConfig.className) {
+ this.layerElement.setAttribute('class', this.renderConfig.className);
+ }
this.layerElement.setAttribute('preserveAspectRatio',this.renderConfig.preserveAspectRatio);
//this.layerElement.style.transform = 'translate3d(0,0,0)';
//this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = "0px 0px 0px";
