Integrating waves css javascript and canvas

Design help Custom code
1

Hey Webflowers!

I have some knowledge of .js and css and can normally fudge a way of getting a code pen / css to work on a site, however I cannot for the life of me get this: https://www.cssscript.com/animated-waves-javascript-canvas/ to work on a webflow site.

I want to have the bottom of my landing page animated with this wave effect.

Does anyone have any experience with using canvas and javascript?

Thanks!
Steve

Here is my public share link: LINK
https://preview.webflow.com/preview/built-bold-2-0?utm_medium=preview_link&utm_source=dashboard&utm_content=built-bold-2-0&preview=fce7aac95d54134af9a252841dabd3ce&mode=preview

Published link here: https://built-bold-2-0.webflow.io/

2

Hello @Steve_Wright,

Did you check on the published site? Also, could you share a read only link?

3

Apologies! I thought I had posted it:

https://preview.webflow.com/preview/built-bold-2-0?utm_medium=preview_link&utm_source=dashboard&utm_content=built-bold-2-0&preview=fce7aac95d54134af9a252841dabd3ce&mode=preview

Published link here: https://built-bold-2-0.webflow.io/

I’ve got it working a bit, but the animation won’t loop and I can’t get it to sit at the bottom of the page.

Any help much appreciated!

4

Hello @Steve_Wright,

I don’t think you need the html embed. Instead of that embed create a div block with position absolute at the bottom, 100% width and height of parent element, with a class of canvas-wrap and an id of canvas. I hope this helps.