What’s up guys, I’m trying to embed something like the green particle animation this into my site - https://www.craftedbygc.com/ I’ve read EVERYTHING I can find about this on various parts of this forum & beyond, including this tutorial http://particles-js.webflow.io/ (which works great until I c…

I just noticed that is not Codepen, so you have to manually convert it to CSS by hand or use a LESS compiler to change the LESS CSS code to plain CSS.

In Webflow, JS is usually placed in the Footer Code. For HTML, use embed code component. For CSS, place in Header Code. Using jQuery plugins that are hosted on Github Also, feel free to contact me for further code help and/or customization of third-party plugins

[image] samliew: Using jQuery plugins that are hosted on Github Not all heros wear capes. Had a little inception moment after glancing at the reply, swap the a & m in your name and we become one :stuck_out_tongue: Seriously though, thank you.

@samliew Just looked on github & couldn’t find anything like what I found on codepen/css desk. Are they more complicated to implement?

[image] smallio: what I found on codepen/css desk Then manually do this [image] samliew: JS is usually placed in the Footer Code. For HTML, use embed code component. For CSS, place in Header Code. If you need help implementing something, you can always find me here

@samliew Okay I tried that & I tried wrapping it like you did but the CSS just showed on the page. I’ve copied all of them in the right positions. What am I doing wrong here? I’m assuming tags/wrapping but I’m not sure exactly. Here’s the live site - http://javascript-testing-6bb782.webflow.io/ …

You cannot use LESS, SCSS, or SASS with Webflow. Switch the Codepen CSS view to Compiled CSS then copy that instead. Wrap CSS code between <style></style> tags. Wrap JavaScript code between <script></script> tags.

[image] samliew: <script></script> Okay I tried a different example using codepen just so I can learn the basics before I convert by hand. Looks like I am nearly there, It’s just the particles missing - http://javascript-testing-6bb782.webflow.io/ For the record I’m using this now to try it…

Oh wow, okay it works now but stops after like 3 seconds and refreshes! So close!!

Fixed it :slight_smile: Thanks again dude, works perfectly!

How did you do it? Sorry but I’m really struggling here :smiley: Would appreciate a step by step explanation.

JS, CSS & HTML - Where to put each one?

Design help Custom code

samliew (webflowexpert.com) December 21, 2017, 9:47pm 13

Please ask a new question if you have an issue. Don’t forget to explain what you are trying to do.

Topic		Replies	Views
Embed simple javascript code Custom code	7	12031	February 4, 2019
How to integrate this JS animation into Webflow Custom code	9	7649	December 2, 2019
Where to Put HTML and CSS from Codepen Custom code	6	9604	April 2, 2022
Embedding a CSS longer than 10.000 characters Custom code	5	700	July 27, 2022
Huge SVG Animation (Github embed) - CSS/JS not working Custom code	12	3682	September 21, 2018

JS, CSS & HTML - Where to put each one?

Related topics