Interface & Interaction (Interface & Interaction)


During this project I created a visual and animated timeline using plain CSS, HTML and Javascript.

This timeline revolves around the fictional characters Tom and Jerry. Its shows their origin and different shows and studio's through the years.


Due to time restraints I was unable to create a fully animated timeline. Still, the entire experience was enjoyable and I learned new skills within CSS and animation.


At first I wasn't sure what character(s) I wanted to create a timeline for. I considered a few different options but eventually settled on Tom and Jerry. I chose this because I grew up watching their shows and I thought it would be fun to create a timeline for them.

The house in which the timeline would play was first created in Blender to get the basic perspective right. After that I used the base to draw the scene in Photoshop. Certain elements in the house (Ones the user or the character interacts with) are made with HTML and CSS.