how to stop animation Javascript?

Question

When hovering over the menu, I want to trigger the animation. I want to stop it if the menu is no longer overflown.

CORRECTION

     animeMiddle() {
            this.menu.addEventListener('mouseover', () => {
                  this.ctx = this.middle.animate([
                            {width: '0'},
                            {width: '100%'}
                        ],
                        {
                            duration: 1000, iterations: Infinity
                        })

            });
            this.menu.addEventListener('mouseout', () => {
                this.ctx.cancel();
            });
        }

Answer 1

Animation.pause() is what you need.

From MDN:

The pause() method of the Web Animations API's Animation interface suspends playback of the animation.