How are complex animations for web sites developed (in terms of design)?

Question

Canvas

Hello. It seems like an experienced programmer, he made up dozens of complex sites, sometimes even very creative and beautiful ones, but he never dealt with complex animations that are written on canvas. If technically, I can figure out how to write them on canvas, then, please tell me, in what form should I receive the sources? I usually get layouts in Figma, Photoshop, Illustrator, etc. And how should it look like? Many, many layers (let's say in psd) that seem to be designed for GIF? Or in addition to this, the designer has to make a video, for example in After Effects? The designer turned to me with the same question, he does not know the answer. Can you suggest some manuals, or links to manuals?
Animation examples:
1) www.djeco.com/en - on the main screen
2)https://dae.sk/start - on the main screen with a circle, a relatively simple animation, but it's still not clear what format the sources for it should look like
3) https://dribbble.com/shots/4433298-PQ-icons specifically here is a gif image. But what if the task was to do it on canvas?
Thank you very much in advance.

UPD: I'm interested in exactly what form / format the design should look like , and not HOW to do it from a programming point of view (i.e. I understand that there are different JS libraries, etc.). Ie, is it a set of layers + video (for heavy animations), or + TK (for lighter ones), or how do complex CANVAS animations usually do?

Answer 1

To make an animation, you need to see how it works and get the elements that make it up. So ideally: GIF or video + animation objects in the form of images.
Sometimes, instead of a full video, there are enough static images of three states: initial, intermediate and final. + description on the fingers of transitions and effects. Here, as with the designer, agree. If he is planning something epic there, then it is better to see it in dynamics.
On the first site. By the way, the animation is not canvas, but css.

Answer 2

It may be too late, but serious animations and 3D are done using
treejs https://threejs.org/examples/#webgl_geometry_nurbs
and pixijs https://pixijs.io/examples/#/demos-basic/container.js

Answer 3

You can draw beautiful motion graphics in after effects and then export to json through movinbody. There are many such examples on YouTube.