UPDATE: tests with [login to view URL] show it can be used. Lower bid.
Hi there, I'm Matt Sergei (do call me Matt, please) and would like to create your animation -
After checking your CodePen example I propose either one of implementations below:
1. GSAP based solution
1.1. Dynamically created SVG bubbles for their references. The issue with your CSS created bubbles is that they are (DOM paint) rectangles so circular collisions cannot be detected or would be extremely hard.
1.2. Collision detection code as part of the GSAP animated timeline.
1.3. Random placement of bubbles is of course easier with dynamic creation.
1.4. Font matching is not an issue e.g. no font loading required in your case (sans-serif default used in a web browser).
1.5. And of course rotations, slight left and right, changing when hit etc.
2. [login to view URL] solution
To make this part short - it's a physics javascript library and gravity could be set to 0.
Almost all the same features as in #1 yet the collision code is built-in and would be easier to use. I would have to check about text captions and rotations (I guess you don't want "upside down" turned captions).
Otherwise I'm a webmaster and IT developer for 26 years, scripting web animations/charts/maps for 7+ years, including (subcontracted) GSAP ads for various UK agencies, like this:
[login to view URL]
[login to view URL] example:
[login to view URL]
Regards and hope you're safe,
Matt