Deconstruction of a Google Doodle

Today I am deconstruction a google doodle to see how it is done.
A Google Doodle is a fun, unexpected and spontaneous logo change to celebrate birthdays, anniversaries and the lives of famous artists, pioneers and scientists. The idea for the Google Doodle comes from numerous sources such as Googlers and Google users.

The creative process starts with the design. In this case, I am deconstructing the Kano Jigoro’s 161st Birthday Doodle, which you can watch here:

As a Digital designer, I am interested to see how they built the illustrations on the page and how they wrote the code to create the transitions.

When I first looked at the doodle, I liked how it has different layers, creating a sense of perspective, and immersing viewers into the story. There is a sense of tridimensionality that it’s captivating about this doodle in particular.
This is how it looks on my browser:

Firstly, looking at the code of the page, I found the javascript they created as the container:
Here they are setting the canvas size: Width: 1158px, height: 500px.
They set a transition between slides of 2 seconds

Secondly, the position of the layers.
Each slide is composed of three layers, all of them are in the same png file:

In Javascript, they position each part above the other to create a perspective effect.
The result is stunning. These doodles are a perfect blend between engineering and art.