HTML5 Animation Not Appearing

[sarahbaker]

Hi there –
I've been trying for weeks to get an HTML5 animation rendering on our site to no avail. The animation is interactive and was made with Adobe Animate CC. I've gotten it working on a Squarespace and a Wordpress site with no trouble – I'm wondering if the conflict lies within our Hubspot theme.

The page where the animation is supposed to be rendering is https://www.75f.io/outside-air-optimization-energy-efficient-hvac

It's supposed to be rendering below the bullet points under "Product Features", where there's a large white space. (Javascript file is called OAOanimation.js, the PNG is OAOanimation_atlas_.png)

Adobe Animate exports the file in 3 parts: a javascript file, an HTML file, and a .png image. Part of the HTML file is supposed to go in the head of the document, and the rest goes in the body. I have been placing the body HTML via a Custom HTML module.

Things I've tried:

- Creating the javascript file as a coded file and linking it using HubL

- Uploading the javascript file into the file manager & linking it that way

- Hosting both the javascript file and the .png offsite 

- Placing the HTML & calling the javascript from the header via the Design Manager

- Placing the HTML & calling the javascript from the header via the Page Editor > Settings > Edit Head HTML section

- Placing the HTML & calling on the javascript in the footer via the Page Editor

And a bunch of other various fixes. 
I've never seen anything render except that big, white box. Again, the animation works fine on other sites using the same processes I have tried.

Any help is much appreciated. Thank you!

[lzafrani]

is this this working or not because i want to try this for my website

[dessery]

Hi Sarah

Could you share with us the various bits of code that you are adding to the page/header etc. That might help us identify any potential problems so we can get this working for you 😉

All the best

David

[sarahbaker]

Yeah absolutely!

This is what I'm putting in the head:

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="{{ get_public_template_url("Custom/page/js/OAOanimation.js") }}"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
ss = ss||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) { 
if (evt.item.type == "image") { images[evt.item.id] = evt.result; } 
}
function handleComplete(evt) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
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.OAOanimation4();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.enableMouseOver(); 
//Registers the "tick" event listener.
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage); 
//Code to support hidpi screens and responsive scaling.
(function(isResp, respDim, isScale, scaleType) { 
var lastW, lastH, lastS=1; 
window.addEventListener('resize', resizeCanvas); 
resizeCanvas(); 
function resizeCanvas() { 
var w = lib.properties.width, h = lib.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 = w*sRatio+'px'; 
canvas.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio; 
stage.scaleY = pRatio*sRatio; 
lastW = iw; lastH = ih; lastS = sRatio; 
}
})(false,'both',false,1); 
}
</script>

And then this is what I've been putting in the Custom HTML module:

<body onload="init();" style="margin:0px;">
<canvas id="canvas" width="1002" height="704" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>

[dessery]

Hi @sarahbaker

The HTML potentially looks wrong to me, are you pasting that into the middle of the page somewhere? Their should only be 1 body tag on the page and that will be added automatically by the designer manager so adding a second one into the middle of the page might cause strange effects, or hubspot may just strip it because they know its not right.

I would try and replace the HTML that you have added to the following:

<canvas id="canvas" width="1002" height="704" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>  

<script type="text/javascript">
    $(document).ready(function() {
        init();
    });
</script>

 This is all untested but hopefully will work for you 😉

All the best

David

[sarahbaker]

Aha – progress, thank you!! The .png is showing up now, but interactivity isn't working (there should be a rollover effect). Any ideas there?

[dessery]

Hi Sarah

That's a great start. I can see an error in the JavaScript console saying the following:

Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

Where is it you are hosting the png at the moment, is it in HubSpot? Is there somewhere where you can specify where you are hosting the image?

All the best
David

[sarahbaker]

Yes, the image is currently hosted in Hubspot. I can specify where the image is hosted in the OAOanimation.js file, in this line:

// library properties:
lib.properties = {
	width: 1002,
	height: 704,
	fps: 24,
	color: "#FFFFFF",
	opacity: 1.00,
	webfonts: {},
	manifest: [
		{src:"http://cdn2.hubspot.net/hubfs/2679969/Product%20Imagery/OAOanimation_atlas_.png", id:"OAOanimation_atlas_"}
	]
};

I just tried hosting the image externally, and that didn't seem to change anything.

[dessery · Accepted solution]

Hi Sarah

Could you try updating the link to the file to be:

https://www.75f.io/hubfs/Product%20Imagery/OAOanimation_atlas_.png

I believe the problem may be that you are using the HubSpot CDN domain, although it is hosted in HubSpot, your browser doesn't know that, as far its concerned, its on a different website. By using your 75f.io domain, it will see that it is being loaded from the same site and trust it.

Hope that helps

All the best

David

[sarahbaker]

Amazing! That worked, thank you so much – you saved me so much trouble. I really appreciate it!!

[dessery]

Hi Sarah

Awesome, delighed to hear that its working for you!! The animation looks great by the way!! Just one additional comment, if you update your canvas html to the following:

<canvas id="canvas" width="1002" height="704" style="display: block; background-color:rgba(255, 255, 255, 1.00); margin: auto"></canvas> 

It should center in the page for you too 😉

All the best

David