Streaming live at 10am (PST)

Embed JS Animation Into Webflow Website

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:

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!

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

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

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)?