how to load two animate cc canvas animations in one html5 page
hi all, i am stuck in merging of two canvas animations from animate cc in one html5 page, which is not happening. it would be great help 
if someone suggest a best working method for below two separate animations into single page.
animation one
<html>@
<head>
<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
}
</style>
<script>
var createjsfirst = createjsfirst||{};
var createjs = createjsfirst;
</script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tree_animPC.js?1483449223244"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
handleComplete();
}
function handleComplete() {
exportRoot = new libfirst.tree_animPC();
stage = new createjsfirst.Stage(canvas);
stage.addChild(exportRoot);
stage.enableMouseOver();
fnStartAnimation = function() {
createjsfirst.Ticker.setFPS(libfirst.properties.fps);
createjsfirst.Ticker.addEventListener("tick", stage);
}
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = libfirst.properties.width, h = libfirst.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'width',false,1);
fnStartAnimation();
}
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1100px; height:545px">
<canvas id="canvas" width="1100" height="545" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1100px; height:545px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------
Second animation
<html>
<head>
<style>
#animation_container {
position:absolute;
margin:auto;
left:0;right:0;
}
</style>
<script>
var createjssecond = createjssecond||{};
var createjs = createjssecond;
</script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tree_animM.js?1483449257144"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
handleComplete();
}
function handleComplete() {
exportRoot = new libsecond.tree_animM();
stage = new createjssecond.Stage(canvas);
stage.addChild(exportRoot);
stage.enableMouseOver();
fnStartAnimation = function() {
createjssecond.Ticker.setFPS(libsecond.properties.fps);
createjssecond.Ticker.addEventListener("tick", stage);
}
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = libsecond.properties.width, h = libsecond.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'width',false,1);
fnStartAnimation();
}
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:550px; height:533px">
<canvas id="canvas" width="550" height="533" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:550px; height:533px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
[Moved by moderator from the non-technical Lounge Forum to the AnimateForum for technical help]
AdChoices