Help to build a simultaneous linear and non-linear site

The site has only 6 pages. One home page. 5 Information pages.

From the home page are buttons to the 5 info pages. On every one of the pages there is information, and then buttons to the either Home or the other 4 info pages. This is the same with all information pages. So a visitor can look at the information pages in whatever order they like. That’s the non-linear part.

Here is the linear part: at the bottom of the first information page (IP1), there is an animation of a tree being drawn, quickly, as if in pencil (call this Drawing 1). Visitor goes on to read the next information page (could be any of the other 4) and at the bottom the pencil-drawn tree gets colored in, leaves added (call this Drawing 2). Visitor moves on to any of the 3 remaining unvisited information pages, and at the bottom the colored in tree gets a foreground and a background painted in. At either of the remaining 2 unvisited information pages, at the bottom, animals get added to the drawing. At the bottom of the last remaining unvisited page, the scene animates, animal sounds, wind in the leaves.

The trick, as I see it, is to make this tree scene get made in 5 steps in whatever order the visitor moves through the 5 information pages.

Possible?

I’d love to talk.

hey this is in gerneral possible.
I would use Aftereffects to animate the whole tree scene, export it with bodymovin plugin and using lottie to render them on the webpage.
Then you would need a javascript logic to play the lottiefile as sequence regarding on which page the user is. (first play from frame 0 to 500, then stop, then, if the user changes to the next page (play frame 500 to 1000,… and so on)