Streaming live at 10am (PST)

How to Embed a JS Canvas Animation?


#1

Hi everybody,

How can this be embedded in Webflow (as a background)?

It gives two pieces of code: HTML and JS (See link please)

Thanks for your help!


#2

Hi @Siton_Systems @samliew and @jorn

I believe you had embedded something similar before. Any idea how this could work?

Thanks for your help!


#4

Hello

Here’s a test project I did a while back:
http://particlesjs.webflow.io/

Here’s the preview:
https://preview.webflow.com/preview/particlesjs?preview=2237820148190634ce2a77612ef625ee


#5

Hi @jorn thanks for that. I had seen this test project and noticed that you added custom code to the page and also gave it an ID. Really great work!

The problem is that I could not replicate how to add this new JS. This page https://codepen.io/linrock/pen/Amdhr gives HTML, CSS, and JS - how can it be added?

Any help would be really appreciated. Thank you!


#6

http://particlesjs.webflow.io/confetti

So I made a html embed with this <canvas id="world"></canvas>
Then I turned the coffee script to compiled JS. You can find that in top js section corner inside code pen example. I copied that code and put it inside script tags before /body

Hope it helps :grinning:

The preview should work, look at the new page /confetti


#7

Hi @jorn thank you VERY much, it now works on the page! You’re a rockstar!!! :slight_smile:

One quick question: Is there a way to constrain the size of the confetti effect? I gave the embed a fixed height but the effect is on the entire page. I then put it in a DIV with a fixed height, no change.

It would be amazing if the confetti could just be falling inside a DIV or other object, but not outside of it… Thanks!


#8

PS: I think it works by hiding the overflow of the DIV and giving it a fxied height :slight_smile: If you have a smarter way, let me know! Thanks


#9

Just size your embed to your likings and make sure to set to overflow hidden. I updated my example so take a look there.

And thanks for the kind words. It’s always nice to be able to help :blush:


#10

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.