Embed JS Animation Into Webflow Website

Design help Custom code
1

Hello!

So I’ve been trying to embed this codepen animation into my Webflow project.

I managed to remove everything unnecessary for me in the animation (sliders & text) and keep the floating particles and the canvas.

I changed the colors of the canvas background and particles, and ended up with this result:

21%20PM
21%20PM1384×930 130 KB

This left me with HTML Code and JS only.

I added the JS code in the before “/body>” tag, sandwiched between <script & /script>, and then added the HTML Code in an embed elements in the designer.

I published the page, but I was not able to see the animation.

Can anyone help please? Thank you so much!

2

Can you share the published link? Alternatively, in your browser, open the developer tools to see what the error is - This will help provide direction re finding a solution.

My first guess is that you forgot to include the dependencies (ex. <script src=“[LIBRARY URL]”></script>). The pen you referenced has 3 that will need to be included above the JS code you pasted. You can see a pens dependencies by clicking the ‘gear’ icon to the right of the JS code section title.

1 Like
3

Thank you for your reply Cjh! That worked like a charm :smiley:

Now I just need to figure out a way to contain it within the div block.

Here is the published page: http://www.ideatoapp.io/new-home-copy

4

In the HTML, the width and height are set as numbers.

How can I tell it that I want to set width and height of canvas based on the parent element (div block)?