How to move divs/images randomly in an HTML page and bounces with the screen edges and also when they meet each other?

[manumqln]

I want multiple elements (images/divs) to move around the HTML page in random motion bouncing of each other and the edges of the screen. The example I have given is in GSAP2.0. Can anyone help how to do this in GSAP 3?

See the Pen vYyOmQw by manumqln (@manumqln) on CodePen.

[mikel]

Hey @manumqln,

 

Welcome to the GreenSock Forum.

 

Here is such a concept. Maybe it helps.

 

See the Pen abBOwbR?editors=1010 by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

[ZachSaucier]

Hey manumqln. Upgrading is easy if you follow the migration guide:

 

[ZachSaucier]

@mikel You're using GSAP's random functionality and a hand-written random function in that demo. Why not just use GSAP's random functionality? 

[prop]: gsap.utils.random(min, max)

 

[mikel]

 

Hey ZACH,

 

Good point. I was too quick to migrate ...

 

Thanks ...

Mikel

[manumqln]

@mikel this is very helpful. But I would like to bounce the items when they meet each other rather than overlapping. 

[ZachSaucier]

32 minutes ago, manumqln said:

I would like to bounce the items when they meet each other rather than overlapping. 

That's quite different than what you currently have  You'll have to implement direction tracking (at the least the angle it's going at), hit detection for all of the boxes, and then each time they "hit" you will need to create a new animation that goes in a new direction based on which edge hit and the previous angle it was moving at.