Integrating waves css javascript and canvas

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


Here is my public share link: LINK

Published link here:

Hello @Steve_Wright,

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

Apologies! I thought I had posted it:

Published link here:

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!

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.