Different interactions on the same element simultaneously


I am working on redesigning a section on our website DnA | Industry Solutions and Ventures to be more user friendly (the circle is automated and allows no user interactions).

I made it anew with two sets of interactions: one where when you click on the numbers, the correct amount of numbers light up and the correct text shows. Another is an automated interaction when scrolling into view, where the animation just starts playing, chaning the text and the numbers within certain intervals.

The question is: is there a way to disable the automated interaction wen hovering on the element or starting the on-click interaction? otherwise the automated one will try and keep palying while one clicks forward and that makes the click-interaction useless.

In the automated interaction, there is also another problem, namely that on the second point for some reason one can see part of some other text in the background - I was unfortuunately unable to figure out why, as all the opacities seemed to have been made correctly.

Thanks in advance for the help!

Read-only link: