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.
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.
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.
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 😉
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:
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.
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: