How to create simillar "interactive infographic" in Adobe Animate or other Adobe products?

Hi all!

Sorry for my bad english( I need to make  an interactive infographic to embed on a website like this example

It is important that could switch the slides on time scale like in the example, so that the site visitors could watch the different phases of battle.

All that I understood from example, there are separate images showing the location, actions of troops on different frames, background with a topographic map, images with buttons, time scale. There are also boxes with text that is recognized as text and can be copied.

In information about the page mentions a widget "Polibius". What is it i dont know. Maybe you know.

I know how to draw:

- a topographic map for background

- marks with the troops

However, I do not understand how to do all this interactive and to be able to post on the website.

i`m new in Adobe animate. I began to use only for the sake of trying to make simillar "interactive infographic".

I have no experience in:

- coding

- Adobe Animite

- HTML (know how to insert image into html page)

- CSS (know how to change the font type and color )

- JavaScript

Some expirience in Photoshop and now actively working in Illustrator.

At the moment, I could not even repeat the lines with the arrowheads, not to mention the next steps.

Someone can to explain me how better to make similar an interactive infographic?

What is right step by steps in creating same infographic?

What is the best Adobe program to do that? Is it real to do in Adobe Animate with my knowledge about which I wrote above?

And do you know any relevant video tutorials?

Thanks for any help.