Embed an html 5 animation

[hola117]

Hi guys,

I’ve been trying to get an html5 animation created on Animate to work on my test website. I’m not very well versed in js so please bear with me.

I’ve taken the html script and put on the ‘Custom Code’ section and uploaded the JS file on a server where the html script points to:

On site itself, I’ve created an html embed with an iframe calling the script:

<div onload="init();" id="animation_container" style="background-color:rgba(252, 252, 252, 1.00); width:1200px; height:1200px">
	<canvas id="canvas" width="1200" height="1200" style="position: absolute; display: block; background-color:rgba(252, 252, 252, 1.00);"></canvas>
	<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1200px; height:1200px; position: absolute; left: 0px; top: 0px; display: block;">
	</div>
</div>

I did something similar a while ago on unbounce and it worked and I feel I’m pretty close here but I’m just not understanding what I’m getting wrong

Thanks in advance for all your valuable help, I really want this to work. If not, is there any other solution you guys may suggest instead of an html animation or video?

---

Here is my site Read-Only: https://preview.webflow.com/preview/gunit?utm_source=gunit&preview=b0fc1a92b1c0382a93cd6fc0e08b8192
(how to share your site Read-Only link)

And the published link: http://gunit.webflow.io/

[Ben-Probity (Ben)]

Hi @hola117
After viewing your preview I have noticed that you don’t have any Javascript src in the custom code section of your page eg:<script src="https://www.gustavo-rodriguez.com/wp-admin/images/HomeVid.js"></code></script>
I see that you have onload to init() which is initialising the function script which is viewable under the src in the image above.

Because these scripts aren’t installed your html embed won’t work as it is calling for scripts that aren’t there. Also when using the custom code section and html embed they only render on the published page.

Hope this helps,
Ben