Problem with the animation of the button on the site

The authorities have given to freelancers a few million rubles for the website, and the button animation on the main page is ragged and jumpy, the bottom of one position of the button misses the beginning of the looping part. Since there are a lot of graphic elements and animations on the site, it was decided to make a preloader, after its loading the animation of all of the site elements should start smoothly, without twitching and loss of frames, especially the main button (PLAY button) in the center on the first screen. It has 3 positions - 1. appearance (24 frames), 2. main animation (48 frames), 3. induced position. The problem is that after loading the preloader, the “appearance” animation begins either not from the first frame, or the “main animation” begins without waiting for the “appearance” animation to finish, that is, two animations overlap, as a result, we get a “ragged animation”, loss of frames and in general not really correct operation of this button.

Freelancers blame this problem on “too many graphic elements and animations”, as well as the fact that existing web technologies and supercomputers are not able to smoothly reproduce the animation consisting of two small WEBP files. Is that true? If not, what is the error in the current version?

The first thing to do is to fix the errors found by the validator:

Then fix the issues found here


Thx a lot, this is very usefull for us. We try to fix this.