Group 8

On by: angeliki-fokou

Helps users to create modular and expressive animations and provides an intuitive substrate to coordinate them in time and space.



User’s Goal:

To animate a slide presentation with a high number of dynamic elements in an efficient and precise way.


Application of an animation to an element of a certain slide.


Animations creation and management


Each slide element can be associated with a substrate where the user can apply a set of animation tools to add traits to the animations of the element.

The substrate decouples the animations from their subject reinforcing a polymorphic reuse of animations and a more predictable fusion of animations.

The users will be able to reach the quantifiable level of the atomic animations and, to handle the resulting complexity, make their own toolkits with aggregated and altered animations.


We have learned through practice that by designing and controlling not only our tools but also the substrates where they act, we are able to define systems whose functionality emerges spontaneously from the logic of the substrate.
An example of this for us was the creation of an animation-pattern by demonstration. It was the substrate that suggested to us that such information would simply be an animation to be added to the other in the timeline.

  • Lo-Fi
  • Hi-Fi
  • Demos

Instrumental interaction


The example shows the application of a reified tool: "vector animation" and how it involves a direct manipulation in the appearance, position, and motion of a specific object of interest (the star in the example). This transformation is situated in a specific compound substrate.


The example shows how our tools for creating all primitive animations (and thus also composite ones) can be applied to objects of interest that are fundamentally different from each other, not only shapes, text, or images but also groups of elements.


The example illustrates how the user can generate composite animations. That are costumed tools that will become part of the user's toolbox. So as to reuse a specific composition (in time and space) of atomic or compound animations.

As shown in the example, our substrate consists of two specific interfaces: an animator timeline and an animations' continuum preview. The first allows the products of the tools (the atomic animations) to arrange and relate to each other in a space where the reified metric is time. The second displays the manipulated object of interest and provides a substrate in which the animations are displayed and can be manipulated in the space.

In the animator timeline atomic animations of different types (both primitives and composites) arrange together, to adhere to a common substrate. The example shows how this integration occurs unambiguously due to common metrics: Composing transition animations involve vector addition (as in the example), composing color animations involves color blending and composing resize animations involves coefficient addition.

The example shows how it is possible to share the same substrate among multiple objects; a change in the shared substrate results in the same alteration in the objects animated by it.

  • Lo-Fi
  • Hi-Fi
  • Demos

Human-Computer Partnership


The user, by hovering the cursor over a tool icon (the custom animation in the example) will get a feedforward (in both substrate interfaces) informing him what the outcome of that command might be in that situation (place and time).


The video shows an example of how our user can redefine the purpose of the tool. The user stops interpreting the costumed animation as a mixer of animations and grasps it for another property of its own, that of container. In the example, he makes at an initial moment a palette of colors that he saves in a compound animation, and then, he applies them separately to different objects.


The example shows how the user can not only invoke a subset of commands to manipulate the animation of object of interest but can apply to those same commands an alteration that is an expression of the user's sensitivity and not that of the system.

If the previous example showed a way to predict an input's behavior, this example shows how our substrate animations' continuum preview allows discoverability in the opposite direction: Starting with the output rediscovering what inputs led to it (intensive use of compound animations can make one lose sight of that information). This mechanic, as shown in the use case, is particularly effective for discovering each animation in the slide duration.

The video shows a use case in which the user takes over both substrate interfaces by exploiting a property of them that we had not exploited by design.
The user must create a scene consisting of two animations that must synchronize in time and space. He decides to align the 2 timeline animator panels (property allowed by the reification of the substrate in a 2D panel), so that once the sliders are also aligned he will be able to identify the same events over time.

The interface of our "animations' continuum preview" substrate is highly expressive. The element it houses (red line) is not only the display of tool output but is an interactive object by which the user can apply sensitive alterations to the proposed output from that output.
In this example, the user applies a noise pattern by instructing the application by means of a demonstration. That noise will be interpreted as a positive variation to be repeated.