Streaming live at 10am (PST)

Adding third part JS to my project

Hey guys!

Is anyone capable of helping me with some custom code?

I found this website: https://tympanus.net/Tutorials/InfiniteLights/

And I would love to use it in my upcoming project.
I am not really a developer and rush on time.

So my question is, can I do it in Webflow or do I need to manually inside it after export?

Thanks a lot

I can outline the process quickly. It takes some skills to integrate such an effect into a Webflow site. It’s pretty easy to catch the logic, but it’s difficult to debug when it doesn’t work after you think you’ve done all the steps, if you don’t have JS coding logic and.or html/css coding logic.

The effects you see on sites like Tympanus are composed of several things:

  • a structure of HTML elements. You have to recreate this structure in Webflow. It’s a structure made of HTML elements, such as divs mainly, and texts etc… Each of those elements have classes and ID’s applied to them and that must also be recreated in Webflow.
  • CSS code, that have to be reproduced as much as you can using the Style panel (Webflow’s UI), and when there’s unsupported properties, the code has to become custom code inside of a Webflow page.
  • Javascript code in the form of lines of custom code and JS linked libraries
    – lines of custom codes must be added to Webflow at the right position (site or page level, head or end of the body)
    – js libraries must be downloaded and re-hosted somewhere on a server (not Webflow), and appropriately linked using custom code at site or page level in Webflow. Alternatively, it’s often possible to find public repositories for those libraries (js libraries are in fact js files containing code).

For instance, if you go to your demo page, click on the Article link, then download source. And inspect the source HTML file. You’ll see that there’s 4 linked JS files.

2 Likes