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: https://g.co/doodle/b5fqpfy

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:

via GIPHY

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.