Animating Bubbles using Greensock

[dotsinspace]

Just out curiosity i am asking this question is there any way i can animate these bubbles using greensock. and currently i am using simple css with hard code position of bubbles. so was thinking that i could randomize bubble inside any given div and when i hover any bubble it pushes other surrounding bubble giving feel of collision.

Link: https://imgur.com/a/XbQAlyx

Thanks for making this awesome library

[Cassie]

Hi there! If you can create a minimal demo with your code then we can take a look and advise you ☺️

 

TLDR, if you can target those elements and their position wit JS then yes - you can animate them using GSAP

 

Collision detection will involve a decent bit of custom code/logic. It sounds a bit physics-y and that's not really something GSAP offers out of the box. But - you could potentially write some GSAP timelines that give the feeling of collision/physics instead of doing actual collision detection

[Cassie]

You can use Draggable hitTest() to detect collisions. But if I were you I'd wait and see if there's a simpler timeline based solution first

https://greensock.com/docs/v2/Utilities/Draggable/hitTest()

[dotsinspace]

i did tried something but images i am getting are overlapped. how can i avoid overlapping of these images in following example. and i think there is no need of codepend for this because its just simple logic where i randomized with , height and position to get these. it basically randomize images on every referesh.

 

https://imgur.com/a/V6zK7vo

[GreenSock]

Are you asking how to take a certain number of [circular] elements and randomly place them all within a specific rectangular area (fixed size) without any of them overlapping? Where does the animation come into play? Trust me, a minimal demo will go a very, very long way to getting you a prompt and accurate answer. 

 

I looked at the image you posted and I see a bunch of circles that overlap, so I'm guessing you want to randomly scatter their placement in a way that also forces them not to overlap? And currently you've got them hard-coded in CSS but you want a JavaScript solution instead so that it's more automated?

[dotsinspace]

I want sweet effect of bubble colliding with each other as you said (Are you asking how to take a certain number of [circular] elements and randomly place them all within a specific rectangular area (fixed size) without any of them overlapping?) and when mouse is hovered over any image then it should push others away.

 

See the Pen jOpbNmo by dotsinspace (@dotsinspace) on CodePen

[GreenSock]

Ah, okay. Yeah, like Cassie said that's an entirely different beast (if I understand you correctly) which involves constantly looping through and checking for collisions and when when one is found, moving it dynamically in the direction away from the collision, etc. That's the job of a full-blown physics library which isn't what GSAP is for. Sorry. With enough custom logic, it's totally doable. But it's not like there's a build-in GSAP method that handles all that for you. I wish I had a magic bullet to offer.