circles don't overlapping and animate

[amjad_barchini]

hello I want to make website to simulate this website exactly in the way of movement and behavior when the vircles touch each other is there any way to buil it using gsap please https://cryptobubbles.net/

[Toso]

hi @amjad_barchini could you please add a minimal demo so we can see what you built and what the issue you have?🙏

[Rodrigo]

Hi,

 

This not a simple task and is beyond what GSAP is built for. GSAP is an animation engine but not a collision detection + physics library. GSAP can provide some aspects of this with the Physics 2D plugin:

https://gsap.com/docs/v3/Plugins/Physics2DPlugin

 

Here is how collision detection works in is simplest state:

 

But if I was you I'd look into Matter JS for this:

https://brm.io/matter-js/

 

Happy Tweening!

[amjad_barchini]

19 hours ago, Rodrigo said:

Hi,

 

This not a simple task and is beyond what GSAP is built for. GSAP is an animation engine but not a collision detection + physics library. GSAP can provide some aspects of this with the Physics 2D plugin:

https://gsap.com/docs/v3/Plugins/Physics2DPlugin

 

Here is how collision detection works in is simplest state:

 

But if I was you I'd look into Matter JS for this:

https://brm.io/matter-js/

 

Happy Tweening!

thank you so much but after a lot of searching I think only the three.js can build like this bubbles or vanilla javascript but it is too hard

[amjad_barchini]

20 hours ago, Toso said:

hi @amjad_barchini could you please add a minimal demo so we can see what you built and what the issue you have?🙏

my demo is too bad so it is not offer any shape like the live website

 

[Toso]

2 hours ago, amjad_barchini said:

thank you so much but after a lot of searching I think only the three.js can build like this bubbles or vanilla javascript but it is too hard

 

with threejs you are making it 10x harder for yourself since you will also need a physics engine with threejs like Rapier or cannon, creating it with a framework like react for example. you will need to study also extra stuff like react three fiber, react three drei, react three rapier / cannon 

 

i think Rodrigo gave you the best option here to use a physics engine directly something like this one i created with Matter it was much simpler to do it compared to trying to add physics with threejs 

 

https://balls-orcin.vercel.app/

you can grab them and test the zero gravity btn 

[Rodrigo]

Yeah I totally agree with @Toso, plain canvas with matterjs seems to be the best and simplest approach, since everything is already solved for you, anything else is complicating things far too much.

 

Happy Tweening!

[amjad_barchini]

23 hours ago, Toso said:

 

with threejs you are making it 10x harder for yourself since you will also need a physics engine with threejs like Rapier or cannon, creating it with a framework like react for example. you will need to study also extra stuff like react three fiber, react three drei, react three rapier / cannon 

 

i think Rodrigo gave you the best option here to use a physics engine directly something like this one i created with Matter it was much simpler to do it compared to trying to add physics with threejs 

 

https://balls-orcin.vercel.app/

you can grab them and test the zero gravity btn 

thank you so much but the problem is in matter.js can I detect the size of them to occupy the whole screen ?

[Rodrigo]

2 hours ago, amjad_barchini said:

thank you so much but the problem is in matter.js can I detect the size of them to occupy the whole screen ?

That's a question for MatterJS support or maybe StackOverflow. We try to keep this forums focused on GSAP related issues.

 

Good luck with your project! 👍

Happy Tweening!