Codepen Code Integration Question

Trying to implement this code on my site:

I’ve put the CSS in the head, JS in the /body, and created an HTML embed. It’s not showing up. Any help would be appreciated, still learning this code embed stuff in Webflow!

Thank you

you need to post a read only link to your site so we can have a look and see what you need to fix. also since it is custom code - its only visible in the published live site - so you need to post a link to that.

Read only link:
https://preview.webflow.com/preview/imonetize?utm_medium=preview_link&utm_source=dashboard&utm_content=imonetize&preview=a0f07b5e9d819b9a30d3b6ca6363aac4&mode=preview

Page in question: Academy Enter
https://www.imonetize.co/academy-enter

Thank you for any help!

So,

It looks like there is a couple of issues…

  1. this is the biggest one :slight_smile: - you did not load the library (script src=) for anime.js… if you will look at the codepen settings JS section - you will see that they call it from script src=https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.min.js

  2. I think there is a problem with how you id the “canvas” - you should go to the settings for the HTML embed and set it there 44%20AM

see if it starts working after that…

Hey IVG, thanks for your help thusfar. I am truly a JS newb. I tried implementing the changes you suggested but it didn’t work.

I think perhaps I am not referencing the source from the content delivery network properly in the script. I did some research as to how to do it but I suspect that might be the problem.

Hi MangoTree,

If I could have a stab at explaining how I go about doing this.

You start off by dragging an Embed into Designer. Then put the canvas html inside

I style the HTML embed as Absolute, Square symbol and Display as Flex Align centre and Justify centre.

Next bit is in the Head Code Settings. This is as per Codepen:

canvas {
display: block;
width: 100vw;
height: 100vh;
}

inside style tags

You notice it is canvas and not .canvas as we are not targetting a class but an actual element.

Next is to find the anime.min.js source code which is referenced in the Codepen. The latest version can be found here as 2.2.0

There are two flavours, Here you can choose the min version
https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js

If you copy/paste this url in your browser and view, you will see the actual javascript in text form. There is far too many characters here to load into the Before tag of Webflow [ limit 10,000 chars ] so we need to be a bit savvy.

Copy this javascript into a text file ( I use Notepad for simplicity) and save as something like anime.txt
I always keep the author details in it as a tribute to their hard work

Now instead of referencing the link to a CDN library online you are actually going to reference the text file loaded into Webflow as an Asset like an image.

So, do that next - add your anime.txt as a file into Webflow as you would as if it were an image. Then go to the cog of this asset and find the Webflow url reference.
By now it will be something like
https://uploads-ssl.webflow.com/5dea02c358e6cb22b8578bef/5ded31ef5049672fbb184162_Anime.txt
( yours will be unique to you )

Now go to the Before ‘body’ tag of the page you are on and we are going add the text file using the type=“text/javascript” in our code

So now you have this piece of script

type=“text/javascript” src=“https://uploads-ssl.webflow.com/5dea02c358e6cb22b8578bef/5ded31ef5049672fbb184162_Anime.txt”>

inside Script tags.

Merely replace the https bit with your own reference.

Finally we need to add the JS script in Codepen
Add the JS code in Codepen between script tags - and put this underneath.

So in my version there are two script references - one to a text file, one to code added directly.

Save the settings, publish, and with luck you should be good to go

I hope this helps. I can’t be technical I’m afraid as to why it works. It just does.

1 Like

Thank you for the detailed instructions Zorro - I believe I’ve followed them correctly but still not seeing the effect. I used my own .txt reference and put all of the scripts where you suggested.

is the closing bracket after this code required? or just needs to be within tags?
type=“text/javascript” src=“https://uploads-ssl.webflow.com/5dea02c358e6cb22b8578bef/5ded31ef5049672fbb184162_Anime.txt”>

I was struggling a bit. It was difficult for me to actually put code into this Forum - it doesn’t show it in publishing. Those more familiar with posts will no doubt know a good way to do it.

Let me try an image for the Body tag

And this goes into the Head tag

Style image