Streaming live at 10am (PST)

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!

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>

Thank you for reaching out to me.

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

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

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.

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 !

@ 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:

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.

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.

@zorro7120 So cool!
How did you do it?

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

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