I want to animate a list of elements over several pages. The list is divided into chunks of 4 elements per page. At the start, the first page is displayed, with each element being shown one after the other. After 1 second, these elements should be removed one after the other and the second page should be shown, etc. At the end of the list, the first page should be started again.

pages = [
    [1,2,3,4],
    [5,6,7,8],
    [9,10,11,12]
]

That works quite well. The problem occurs when the list is to be replaced with new data. Somehow the animation now seems to be running in parallel.

I want all animations to stop completely when new data is received. Currently running animations should be canceled. How can I solve the problem?

Is there perhaps a completely different solution?

Here is a link to a stackblitz to demonstrate the problem (each 5sec the list data is replaced). See the console and the page index which demonstrates the problem.