Embedding external HTML files over 10000 characters

Design help Custom code
1

Hi all

I am trying to embed this animation – Document – which is built in HTML (over 10000 characters), CSS and JS to my Webflow site at the top of the page – it will replace the area at the top that looks similar that which currently has holding graphics.

My steps:

I have stripped out the of the HTML and created a new file for HTML here: https://www.brother.design/IFC/4676_IFC-dom.html

I then call the CSS and JS - in the ‘inside head tag’ custom code area within page settings - by inserting:

<link href="https://www.brother.design/IFC/css/style.css" rel="stylesheet" type="text/css">
<script src="https://www.brother.design/IFC/js/anim.js" type="text/javascript"></script>

I have then added – ‘Before tag’ custom code area within settings –

<script> w3.includeHTML(); </script>

I then inserted a div element and inserted an embed code element into my Webflow page.

I then added this code to the embed element –

<div w3-include-html="http://www.brother.design/IFC/4676_IFC-dom.html"></div>

I then published the page and no joy!

I’m not really a coder and lifted the steps above from previous threads - can anyone please point me in the right direction?

Thanks in advance.

Here is my site Read-Only:

https://preview.webflow.com/preview/icons-animate-on-scroll?utm_medium=preview_link&utm_source=designer&utm_content=icons-animate-on-scroll&preview=ca52627ea4bb5e75d51a5ef43aa90380&workflow=preview

2

Hi @domchocolate,

Here’s a CodePen to get you started: https://codepen.io/milan-wf/pen/qBxLGxj

You could host this animation somewhere and use an iframe embed on your Webflow site to display it.

P.S. Make sure you use all scripts from JS settings:
Shared with CloudApp