Particles connected

[HectorJearim]

Hi, i need your help i am new on this and i need do a animation something like this:

 

https://predictiveworld.watchdogs.com/es/hello/

 

Specially with the connected dots animation, so i was looking to do something like this to start:

 

See the Pen jEWGQM by creotip (@creotip) on CodePen

 

But i dont get it. Do you know how can i do someting similar with GASP about connected particles?

 

[Dipscom]

Hi HectorJearim,

 

Welcome to the forums!

 

When you say you're "new on this". On what are you new on? Particle animation? Canvas? GSAP? Development in general?

 

I ask because what those links show are rather complex setups, not really for the beginner developer, there is going to be a lot of basics you need to cover to achieve something like that.

 

Did you check the GitHub repo of that Particles.js? Is there a particular reason why you would want to recreate that using GSAP? Would that Particles.js not work in your project? It seems to do what you are asking for.

[OSUblake]

That first demo you linked to would most likely require WebGL, but the second one could be done with a 2d canvas. Just draw a bunch of dots moving around the screen, and then on every animation frame you would have to manually draw the lines. Most of that could be done with GSAP, but I don't have any good examples making use of it. However, here's a good tutorial using no library. You could convert the particle animations to GSAP, and draw the lines on every animation frame using GSAP's ticker.

 

http://thenewcode.com/1159/Create-a-Dynamic-Point-Mesh-Animation-with-HTML5-Canvas