Integrating External Javascript into Webflow

Integrating external Javascript into webflow

I would like to fully understand how to implement javascript into my webflow site. I have a good understanding of how webflow works and have gone through all of the tutorials. This is what i would like to implement. https://codepen.io/artursopelnik/pen/MEKyRb

Questions:

  1. why doesn’t this work ?
  2. how can i target a specific element so that i can apply a javascript function ?
  3. Whats the difference between ID and Class to target an element ?
  4. am i missing something in my "<script> [something here] </script> " ?
  5. am i missing something in my " <div> [ something here ] </div> ?

This is what i do understand

  1. Javascript cant be hosted internally in webflow so we need to the script from an external source ( ie git, a cdn … whatever ). we can call that script via url as like an image … cool. how do i know its pulling ?
  2. custom code can happen at page level and site level, how do you know what level to implement on ?
  3. i need halp

My end goal is to be able to understand this example well enough that i can implement other javascript libraries and work with them while doing the majority of my layout within webflow. I have a portfolio page that i want to implement and i have roughed out in sketch just super baffled. after a few days reading like a madman i thought id reach out.

Resources used ::face_with_raised_eyebrow:

  1. JavaScript Where To
  2. Integrate code from codepen
  3. How do I create a div id rather than class
  4. Target elements using ID as well as class, and by | Webflow Wishlist
  5. GitHub - juliangarnier/anime: JavaScript animation engine

Current example
https://preview.webflow.com/preview/particles-js-78fbd4?utm_source=particles-js-78fbd4&preview=73d2c3132dfaf0b9ff170d7a57acdc35

@StuM , @mistercreate

Take a look at this webflow site for a demonstration of how to implement particles.js.

https://webflow.com/website/Tutorial-How-to-integrate-Particlesjs-in-Webflow?s=particles-js#

1 Like