Designing Interaction through Animation Systems

The childrens book of pantomimes (London, 1930)

Some books of our digitization project require the implementation of complex animations, and therefore we have to account for all major interactivity points: pull a lever and the seesaw will swing. Hold a figurine to play theater. Spin a gear and a dragon will appear. Sometimes simply opening the page already unfolds a fantastic set of visual mirage.

When an object’s animation does not play linearly – that is, when the order of actions does not matter, or when there is more than one item that could move -, it is important to think of animations as a set of events triggered by the user’s actions.

Let’s take as an example The childrens book of pantomimes (London, 1930).

There are two types of figures, depending on if they can be handled from the right or from the left. Instead of creating 15 sets of animations for each of the character figures, we just create two sets for left and right respectively. Their original position is laying on their paper sheet, then they have an animation to enter scene, a pose to stand on the stage and another animation to exit scene. We included another animation, bounce, to play as if they have a line of dialogue. It is a paper theater after all.

These animations are object-agnostic, which makes the creation of those animations and their implementation in the viewer much faster, and significantly reduces the file size. What the user needs to do for each of those states to trigger is a UX question, which will be tackled in a future post.

Only the carriage needed a dedicated set of animations. We animated it to appear behind the other figures, and it exits to the opposite side of where it enters (to our knowledge, horses cannot go backwards with a cart).

  1. Image: The Fairy figure on stage in front of Cinders in Rags.
  2. Image: Digital version of The children’s book of pantomimes: Stories of famous pantomimes including a stage version of Cinderella and a model theatre complete with proscenium, wings three scenes & characters with which it can be performed, London 1930.
  3. Image: Animation system design for the moving figures of the same book.
  4. Image: 3D mesh highlighting the movable figures by animation set (left, right and carriage).

Author: Casilda de Zulueta