Codepen won't work despite all my efforts

Hello everyone!

I am new to code and struggling to get my Codepen animation work in Weblfow Particle Swarm despite carefully reading/following all the previous topics related to this issue. Could you please help me out?

This HTML is taken from Codepen source

As well as CSS

So far, so good, right? Problem starts once I try to upload JS into before tag. My JS is over 10k characters, so I use GitHub and Combinatronics but can’t make it work in Weblflow after all conversions.

Could you please show me what exactly am I doing wrong?

Thank you!

1 Like

Are you using GIST? SImply enter the github gist url and create a CDN. This will load your code into Webflow from Github. Example of the code to put in before < / body>:

<script type="text/javascript" src="https://cdn.staticaly.com/gh/user/code"></script>

1 Like

Thank you for reaching out to me.

Do I need to do the following before pasting the code?

https://discourse.webflow.com/t/tutorial-embed-cool-javascript-visuals-from-github-into-webflow/81562

1 Like

Thank you for your help.

This is the code I’ve tried to use:

<script type="text/javascript" src="https://cdn.statically.io/gist/Davidson-wq/b5058cf637c180537f3153219e2fee0b/raw/89858bf40bcfde6e4ab198509705c2bab10aedbe/Particles.js">

and still nothing.

I have followed this tutorial by @samliew How to host text files on Github and got nothing (yes, I also went through the entire comment section as well).

Meanwhile, I am trying to get better at coding with w3schools.com but haven’t figured out what exactly am I doing wrong.

1 Like

I believe it is because the codepen you are reffering to is also using external javascript libraries as you can see on my screenshot. Simply integrate those script sources aswell and you should be good to go. Also, when you define the source of a javascript file, you don’t need to specify the type="text/javascript" anymore :slight_smile: :

<script src="https://codepen.io/ImagineProgramming/pen/bcmyD.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/188512/codepen-utilities.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script> 

hope that helps !

1 Like

@ anthonysalamin Thank you so much for helping me but even after I placed all this code - nothing has changed. This is unbelievable! I will try again in the morning.

Below is the screenshot:

1 Like

You could try minify the javascript (I did it) and inject the shortened version into the custom code area before the end of the tag as the script now only “weights” 7827 characters :smirk:

HTML

<canvas id="swarm"></canvas>

Libraries

<script src="https://codepen.io/ImagineProgramming/pen/bcmyD.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/188512/codepen-utilities.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>

Minified JavaScript

<script>
!function(t){"use strict";var i=function(t,i,e){this.set(t,i,e)},e=i.prototype;e.dot2d=function(t,i){return this.x*t+this.y*i},e.dot3d=function(t,i,e){return this.x*t+this.y*i+this.z*e},e.set=function(t,i,e){return this.x=t,this.y=i,this.z=e,this},e.add=function(t){return"number"==typeof t?(this.x+=t,this.y+=t,this.z+=t,this):(this.x+=t.x,this.y+=t.y,this.z+=t.z,this)},e.sub=function(t){return"number"==typeof t?(this.x-=t,this.y-=t,this.z-=t,this):(this.x-=t.x,this.y-=t.y,this.z-=t.z,this)},e.mul=function(t){return"number"==typeof t?(this.x*=t,this.y*=t,this.z*=t,this):(this.x*=t.x,this.y*=t.y,this.z*=t.z,this)},e.div=function(t){return"number"==typeof t?(this.x/=t,this.y/=t,this.z/=t,this):(this.x/=t.x,this.y/=t.y,this.z/=t.z,this)},e.move=function(t){return t instanceof i&&(t.x=this.x,t.y=this.y,t.z=this.z),this},e.within2d=function(t){return this.x>=0&&this.x<t.x&&this.y>=0&&this.y<t.y},e.wrap2d=function(t){return this.x>t.x?(this.x=0,!0):this.x<0?(this.x=t.x,!0):this.y>t.y?(this.y=0,!0):this.y<0?(this.y=t.y,!0):void 0},e.eq=function(t){return t instanceof i&&this.x===t.x&&this.y===t.y&&this.z===t.z},e.distance=function(t){var i=this.x-t.x,e=this.y-t.y;return Math.sqrt(i*i+e*e)},e.clone=function(){return new i(this.x,this.y,this.z)},t.Vector3D=i}(window),function(t){"use strict";var i=function(){this.grad3=[new Vector3D(1,1,0),new Vector3D(-1,1,0),new Vector3D(1,-1,0),new Vector3D(-1,-1,0),new Vector3D(1,0,1),new Vector3D(-1,0,1),new Vector3D(1,0,-1),new Vector3D(-1,0,-1),new Vector3D(0,1,1),new Vector3D(0,-1,1),new Vector3D(0,1,-1),new Vector3D(0,-1,-1)],this.p=[151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180],this.permutation=new Array(512),this.gradP=new Array(512),this.F2=.5*(Math.sqrt(3)-1),this.G2=(3-Math.sqrt(3))/6,this.F3=1/3,this.G3=1/6},e=i.prototype;e.init=function(t){if("function"!=typeof t)throw new TypeError("prng needs to be a function returning an int between 0 and 255");for(var i=0;i<256;i+=1){var e=this.p[i]^t();this.permutation[i]=this.permutation[i+256]=e,this.gradP[i]=this.gradP[i+256]=this.grad3[e%this.grad3.length]}},e.simplex3d=function(t,i,e){var n,s,o,r,h,a,l,d,c,u,p,f,m,y,w,g,v,x,b,D,C,z,M,V=(t+i+e)*this.F3,P=Math.floor(t+V),G=Math.floor(i+V),E=Math.floor(e+V),S=(P+G+E)*this.G3,L=t-P+S,T=i-G+S,F=e-E+S;return L>=T?T>=F?(n=1,s=0,o=0,r=1,h=1,a=0):L>=F?(n=1,s=0,o=0,r=1,h=0,a=1):(n=0,s=0,o=1,r=1,h=0,a=1):T<F?(n=0,s=0,o=1,r=0,h=1,a=1):L<F?(n=0,s=1,o=0,r=0,h=1,a=1):(n=0,s=1,o=0,r=1,h=1,a=0),l=L-n+this.G3,d=T-s+this.G3,c=F-o+this.G3,u=L-r+2*this.G3,p=T-h+2*this.G3,f=F-a+2*this.G3,m=L-1+3*this.G3,y=T-1+3*this.G3,w=F-1+3*this.G3,P&=255,G&=255,E&=255,g=this.gradP[P+this.permutation[G+this.permutation[E]]],v=this.gradP[P+n+this.permutation[G+s+this.permutation[E+o]]],x=this.gradP[P+r+this.permutation[G+h+this.permutation[E+a]]],b=this.gradP[P+1+this.permutation[G+1+this.permutation[E+1]]],C=.6-l*l-d*d-c*c,z=.6-u*u-p*p-f*f,M=.6-m*m-y*y-w*w,32*(((D=.6-L*L-T*T-F*F)<0?0:(D*=D)*D*g.dot3d(L,T,F))+(C<0?0:(C*=C)*C*v.dot3d(l,d,c))+(z<0?0:(z*=z)*z*x.dot3d(u,p,f))+(M<0?0:(M*=M)*M*b.dot3d(m,y,w)))},t.Perlin=i}(window),function(t){"use strict";window.MouseMonitor=function(t){this.position=new Vector3D(0,0,0),this.state={left:!1,middle:!1,right:!1},this.element=t;var i=this;t.addEventListener("mousemove",function(t){var e,n,s;null==(t=t||window.event).pageX&&null!=t.clientX&&(n=(e=t.target&&t.target.ownerDocument||document).documentElement,s=e.body,t.pageX=t.clientX+(n&&n.scrollLeft||s&&s.scrollLeft||0)-(n&&n.clientLeft||s&&s.clientLeft||0),t.pageY=t.clientY+(n&&n.scrollTop||s&&s.scrollTop||0)-(n&&n.clientTop||s&&s.clientTop||0)),i.position.x=t.pageX,i.position.y=t.pageY}),t.addEventListener("contextmenu",function(t){return t.preventDefault()}),t.addEventListener("mousedown",function(t){return 1===t.which&&(i.state.left=!0),2===t.which&&(i.state.middle=!0),3===t.which&&(i.state.right=!0),t.preventDefault()}),t.addEventListener("mouseup",function(t){return i.state.left=i.state.middle=i.state.right=!1,t.preventDefault()})}}(),function(t){"use strict";var i=function(t,i,e,n){this.p=new Vector3D,this.t=new Vector3D,this.v=new Vector3D,this.g=t,this.b=i,this.r=e,this.m=n,this.reset()},e=i.prototype;e.reset=function(){this.p.x=this.t.x=Math.floor(this.r.random()*this.b.x),this.p.y=this.t.y=Math.floor(this.r.random()*this.b.y),this.v.set(1,1,0),this.i=0,this.l=this.r.random(1e3,1e4)},e.step=function(){this.i++>this.l&&this.reset();var t=this.p.x/200,i=this.p.y/200,e=Date.now()/5e3,n=this.r.random()*Math.Tau,s=this.r.random()/4;if(this.v.x+=s*Math.sin(n)+this.g.simplex3d(t,i,-e),this.v.y+=s*Math.cos(n)+this.g.simplex3d(t,i,e),this.m.state.left&&this.v.add(this.m.position.clone().sub(this.p).mul(85e-5)),this.m.state.right&&this.p.distance(this.m.position)<this.r.random(200,250)&&this.v.add(this.p.clone().sub(this.m.position).mul(.02)),this.m.state.middle){var o=this.p.distance(this.m.position),r=this.r.random(200,250);o<r&&this.v.mul(o/r)}this.p.move(this.t).add(this.v.mul(.94)),this.p.wrap2d(this.b)&&this.p.move(this.t)},e.render=function(t){t.moveTo(this.t.x,this.t.y),t.lineTo(this.p.x,this.p.y)},t.Particle=i}(window),window.addEventListener("load",function(){var t,i,e,n=new SmallPRNG(+new Date),s=new Perlin,o=document.getElementById("swarm"),r=o.getContext("2d"),h=new Stats,a=new MouseMonitor(o),l=new dat.GUI,d=0,c=[],u=new Vector3D(0,0,0),p={particleNum:5e3,fadeOverlay:!0,rotateColor:!0,staticColor:{r:0,g:75,b:50},staticColorString:"rgba(0, 75, 50, 0.55)"};h.setMode(0),h.domElement.style.position="absolute",h.domElement.style.right="5px",h.domElement.style.bottom="5px",document.body.appendChild(h.domElement);var f=l.addFolder("Particles"),m=l.addFolder("Colors");f.add(p,"particleNum",1e3,15e3).step(10).name("Particles").onChange(function(){if(p.particleNum<c.length){var t=c.length-p.particleNum;c.splice(c.length-t,t)}else for(var i=c.length;i<p.particleNum;i+=1)c.push(new Particle(s,u,n,a))}),m.add(p,"fadeOverlay").name("Fade Clear").onChange(function(){p.fadeOverlay&&t()}),m.add(p,"rotateColor").name("Rotate Color"),m.addColor(p,"staticColor").name("Static Color").onChange(function(){p.staticColorString="rgba("+Math.floor(p.staticColor.r)+", "+Math.floor(p.staticColor.g)+", "+Math.floor(p.staticColor.b)+", 0.55)"}),f.open(),m.open(),l.close(),s.init(function(){return n.random(0,255)}),(t=function(){o.width=i=u.x=window.innerWidth,o.height=e=u.y=window.innerHeight,r.fillStyle="#ffffff",r.fillRect(0,0,i,e)})(),window.addEventListener("resize",t);for(var y=0;y<p.particleNum;y+=1)c.push(new Particle(s,u,n,a));!function t(){requestAnimFrame(t),h.begin(),r.beginPath();for(var n=0;n<c.length;n+=1)c[n].step(),c[n].render(r);r.globalCompositeOperation="source-over",p.fadeOverlay?r.fillStyle="rgba(0, 0, 0, .085)":r.fillStyle="rgba(0, 0, 0, 1)",r.fillRect(0,0,i,e),r.globalCompositeOperation="lighter",p.rotateColor?r.strokeStyle="hsla("+d+", 75%, 50%, .55)":r.strokeStyle=p.staticColorString,r.stroke(),r.closePath(),h.end(),d=(d+.5)%360}()});
</script>

Hope that helps.

1 Like

I have replicated it on a sandbox page of mine. All contained in text files on Webflow.

https://codepen-examples.webflow.io/swarm

Though a wonder to behold, like many codepen examples, it doesn’t work well for mobile devices where you don’t have a mouse

Reach out if you need an explanation.

1 Like

@zorro7120 So cool!
How did you do it?

1 Like

Sure. If you DM me we’ll arrange a time share.

1 Like

Thank you again for doing this but even with the shortened version the code won’t run properly.

There is HTML <canvas id="swarm"></canvas>

CSS

`
body, html {
margin: 0;
padding: 0;
}

body canvas {
display: block;
cursor: crosshair;
}
`

+your minified JavaScript

And yet nothing seems to work. So weird

1 Like

Here is a working demo implemented on Webflow.

https://particle-swarm-demo.webflow.io/

The read-only project is here.

Comments → Nothing to really to make it work on Webflow. Uploaded large JS code as a text file in the project asset folder. Referenced in the head. I minified another script to get it to fit. I would ideally take all the scripts, combine in one file, then minify and upload as a text file. Cheers.

1 Like

@webdev Hooray! It’s working!
Thank you so very much for your help!

But how to do you remove the control panel + FPS display in the corner of the screen?

1 Like

@anthonysalamin @moofawsaw @zorro7120

Thank you guys for taking the time and effort in trying to help me.

Codepen is finally working. Yes!

1 Like

Those features are deeply embedded into the core javascript. You would need to be a programmer to resolve that. Try contacting the developer (you probably should seek permission to use his work anyway).

2 Likes

If you want to remove the control panel and the FPS counter from the page you need to remove the code that initiates it…
remove this line

gui = new dat.GUI()

and then remove the following lines:

stats.setMode(0); // Start off with FPS mode

  // Place the statistics at the bottom right.
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.right = '5px';
  stats.domElement.style.bottom = '5px';

  document.body.appendChild(stats.domElement);
  
  // dat.gui stuff, 2 folders with a few properties
  var f1 = gui.addFolder('Particles'),
      f2 = gui.addFolder('Colors');
  
  f1.add(settings, 'particleNum', 1000, 15000).step(10).name("Particles").onChange(function() {
    if(settings.particleNum < particles.length) {
      var toDelete = (particles.length - settings.particleNum);
      particles.splice(particles.length - toDelete, toDelete);
    } else {
      for(var i = particles.length; i < settings.particleNum; i += 1) {
        particles.push(new Particle(p, bounds, rctx, monitor));
      }
    }
  });
  
  f2.add(settings, 'fadeOverlay').name("Fade Clear").onChange(function() {
    if(settings.fadeOverlay) {
      resize();
    }
  });
  
  f2.add(settings, 'rotateColor').name("Rotate Color");
  f2.addColor(settings, 'staticColor').name("Static Color").onChange(function() {
    settings.staticColorString = 'rgba(' + 
      Math.floor(settings.staticColor.r) + ', ' + 
      Math.floor(settings.staticColor.g) + ', ' + 
      Math.floor(settings.staticColor.b) + ', ' + .55 + ')';
  });
  
  f1.close();
  f2.open();
  gui.close();

This should remove the fps counter and the control panel

Also, if you don’t want to remove it you can press “h” on the keyboard and it should hide it, and if you want to do it onload you can simulate a keyboard click with jquery - see this

1 Like

@IVG Thank you, sir!
It’s all working fine now!

1 Like

@IVG

I have a a project I’m cloning from here Webflow - Threejs-BackgroundTest

And when I clone it to my project a FPS Panel appears on the page. Am I able to remove this easily?

I have not changed the code at all from the project on the read only link.

1 Like

A post was split to a new topic: Problem with swiper codepen