Need make animated menu with bubbles.
Like here:
http://79.110.52.43/

On vanilla js. Third-party libs and frameworks cannot be used.
Only base jquery.

I looked, it's done on canvas.

Need guides/books/tutorials/articles on the topic.
How to make animations on canvas?

How to calculate the trajectory of the balls immediately after
loading a web page?
How to calculate the trajectory and behavior of the balls when they are dragged with the mouse?
How to calculate the trajectory and behavior of the balls when clicking on the ball and opening the submenu?
How to implement the effect of soap bubbles?

torsar said:
How to calculate the trajectory and behavior of the balls when they are dragged with the mouse?

I would imagine that their trajectory would be the vector given by the mouse position at which they're released minus the previous mouse-position.

Use WebGL and GLSL shaders. This book is excellent to start: WebGL Programming Guide HTML5 <canvas> can be used in “webgl” context. You can draw in 2D and 3D. Complete freedom and complete control with shaders. Use glMatrix library for linear algebra for vector and matrix operations. You can use Planck.js (it is the Box2D port) for interesting animations and for mouse click handling: Handling Mouse Click in Box2D

const canvas = document.getElementById(canvasName);
const gl = canvas.getContext("webgl", { alpha: false, premultipliedAlpha: false });