I recommend using Codesandbox (you could also just have it hosted locally while in development).
- Clone this repo.
- Go to Codesandbox and import the cloned repo.
- Codesandbox will prompt you to install the dependencies during the environment setup and start the server in development mode.
- Go to your Webflow project and add the following code to the head of your project:
<script type="module" src="http://localhost:3000/@vite/client"></script> This is to see your changes in real time.
<script type="module" src="http://localhost:3000/js/index.js"></script>
- Replace
http://localhost:3000
with the URL of your Codesandbox project. - Make sure to edit the code in the
canvas.js
file to match your Webflow elements. - Save and publish your Webflow project.
- You should now see your changes in real time.
I used Curtainsjs for the WebGL example. You can use whatever library you choose.
Because codesandbox servers don't run forever, you will need to build your project for production by running
yarn build
and host the generatedindex.js
file someplace.
-
You can upload the file to your Webflow project and link to it. You have to convert the file to a
.txt
file before uploading and then link to it. This is because Webflow doesn't allow you to upload.js
files. You should replace the head code with the link yto the file as shown below:<script type="text/javascript" src="https://uploads-ssl.webflow.com/${hash}/index.js.txt" ></script>
-
Push the file to Github and paste the Github link on jsDelivr. It will give you a link to use in your Webflow project. Note that the file will be cached for 7 days. To update the file, you will need to purge the cache - https://www.jsdelivr.com/tools/purge.
-
Look into alternative CDN options like unpkg, Cloudflare, etc.