Strategy about Particles animation

[batino]

Hi tweeners!

I came accross this animation: https://marble.studio/about (the fifth section with the animated particles network), and would like to reproduce it.

 

I have 2 questions:

• Which technology / tool do you think was used ?
• Do you know if it is doable in GSAP / pure JS ? I am only concerned about the hover effect and the attract repulse effect that happens during hover. How to reproduce this ?

Thank you for your lights on the best strategy on this one 💡

 

 

[Rodrigo]

Hi,

 

Those are actual DOM elements, <div> tags to be more specific, not the best alternative if you have performance in mind, but if in the particular case works as expected , then go for that.

 

Normally people use either standalone canvas or a WebGL library like PIXI or THREE:

https://pixijs.com/

https://threejs.org/

 

You can find hundreds or even thousands of tutorials and articles in youtube and the web on how to create particle systems with each technology.

 

This guy has hundreds of great videos where he explains with great detail how to work with canvas (no library):

https://www.youtube.com/@Frankslaboratory

 

Hopefully this helps

Happy Tweening!