How to hang onanimationend on an element animated with .animate?

Question

JavaScript

I created a function that hangs an animation on an element, the element animates correctly, but it was not possible to track the end of the animation. Of course, I can do everything on **setTimeout**, but I don’t want to clog the script.

const maxAnimationProperty = '-1000px';
const maxDuration = 800;

function setBallAnimation(element: HTMLElement, value: string) {
            element.animate([
                { top: value },
                { top: maxAnimationProperty }
              ], { 
                duration: maxDuration
              });

            element.onanimationend = () => {
                element.style.top = maxAnimationProperty;
            }
        }

Answer 1

onanimationend has nothing to do with calling via animate. The documentation says that this is for the end of css properties.
Regarding code clogging.
You are using a property that is not standardized.
This means that it can be changed at any time and you have no guarantee that in the future the code will not cause a fatality. This is code clogging.
Normal solution:
Create a normal handler for animation through keyframes
Hang a class.
1) You do not need to dance with a tambourine and look for where some "Genius" decided to make animations through js.
2) Basic encapsulation.