Trying to run more than one HTML5 animation on a website but only one works

Report · Aug 09, 2024

Hey, I'm trying to run more than one HTML5 animation on my website, they work separate but they don't work at the same time, I'm realising that there's probably an issue with the HTML code but can't figure it out.

Here's the code for one of the animations:

<script src="https://uploads-ssl.webflow.com/667d75b3a39631c47d36d495/66b6094d227936dca5db8bac_createjs.min.txt"></script>
<script src="https://uploads-ssl.webflow.com/667d75b3a39631c47d36d495/66b611d395ff1673d2528820_Animate-Engage.txt"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
	canvas = document.getElementById("canvas_E");
	anim_container = document.getElementById("animation_container_E");
	dom_overlay_container = document.getElementById("dom_overlay_container_E");
	var comp=AdobeAn.getComposition("4A672C69714D6349967537ACC8DD4484");
	var lib=comp.getLibrary();
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
	var lib=comp.getLibrary();
	loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
	var images=comp.getImages();	
	if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }	
}
function handleComplete(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	var queue = evt.target;
	var ssMetadata = lib.ssMetadata;
	for(i=0; i<ssMetadata.length; i++) {
		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
	}
	exportRoot = new lib.AnimateEngage();
	stage = new lib.Stage(canvas);	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
</script>
<body onload="init();" style="margin:0px;">
	<div id="animation_container_E" style="background-color:rgba(255, 255, 255, 1.00); width:150px; height:150px">
		<canvas id="canvas_E" width="150" height="150" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container_E" style="pointer-events:none; overflow:hidden; width:150px; height:150px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
  </body>

It works on it own but if I duplicate it the first one doesn't run anymore. I'm trying to implement this in Webflow so I'm using the code embed widget.

Report · Aug 15, 2024

The issue could stem from a couple of reasons:

Shared Variables/Functions: When you export multiple Animate files to canvas and you duplicate the code, they will share the same global variables and functions (i.e. canvas, stage, exportRoot, anim_container, handleFileLoaded(), handleComplete(), etc.) When the second Animate JavaScript (JS) file is loaded, it will overwrite the variables and functions set by the first one, resulting in conflicts (such as your canvas elements not loading).
Single Canvas Element: If there’s only one canvas element on the page, it will be overwritten by the most recently loaded JS file. Each exported Animate file needs its own separate canvas tag with unique ID so they don’t interfere with one another.

To fix this issue, you could manually modify the global variables/function names and create a new canvas element with a unique ID to load your second file.

However, I recommend that you use iframes to load your two exported Animate files. This way, it will keep the code separate.

I’m not familiar with Webflow, but if you go with this approach, you will need 3 HTML files. One file for the iframes, and the other two would be your published Animate HTML files. For example:

main.html

<iframe src=”MY_FILE_1.html” width=”500” height=”500”></iframe>
<iframe src=”MY_FILE_2.html” width=”500” height=”500”></iframe>

Report · Aug 15, 2024

are they both using canvas_e?