What means can be used to implement such an animation?

Question

css

How can you make such an animation? I heard that with react, but I just recently started learning it, so I don't know how.

Answer 1

Specifically, this option will be done as follows (in short):
1. All animations will be extracted from After Effects using bodymovin
2. Lottie-web will be connected to the project
3. Data will be transferred to lottie-web and settings will be made.
The result is an identical animation on svg, exactly like in After Effects, but in the browser.
Why is it so difficult? Yes, because manually you will achieve the same accuracy of timings and crooked animations.

Answer 2

For React, I advise you to use the react-spring library in native
mode , requestAnimationFrame is used and the direct render of the component occurs only at the beginning and end of the animation (it is also performed by the browser tools)
PS: there are enough examples on the library website for basic animation needs.