Sites Inria

Version française



Effectiveness and performance of animated transitions

A new demonstrator, TAN, was just set up on the Plateau Inria, EuraTechnologies. TAN proposes to illustrate 3 examples of ongoing research work leaded by Fanny Chevalier, researcher in the Mjolnir Inria research team (joint with Lille 1 University)* in the field of animated transitions.

Internet is overflowing with animated transitions that are sometimes annoying for users due to an excess of visual stimulation, and often pointless since the animation does not convey the right information. On the other hand, when they are well-designed, animated transitions are incredibly effective. The TAN demonstrator proposes to illustrate three examples of ongoing research work in the field of animated transitions.

As part of her research work, Fanny Chevalier, researcher in the Mjolnir Inria research team (joint team with the Lille 1 University*), has developed models of animated transitions enabling a better understanding of interfaces, and has designed tools that use them in order to facilitate, for example, the editing of images or documents. The initial animated transition design work is vital in order to best convey useful information. This work is complex due to the numerous parameters to be integrated, such as the nature of transformation, positioning and trajectories, duration, rhythms and sequencing, etc. The TAN demonstrator, newly installed on the Inria plateau at EuraTechnologies, presents three examples of her works.


Image editing that associates pixel and color spacing.

Histograms are useful in order to understand the colorimetric characteristics of an image. They can be found on digital cameras or, for example, in tools such as Photoshop as indicators that can guide digital editing. Image manipulations based on the modification of histograms are quite complex for novices, as the tools are often unsuitable to non-initiated users. Histomages proposes animations that facilitate the understanding and manipulation of this histogram representation to edit digital images. The image's pixels come to life to "reorganize" themselves according to their color value, and progressively form the histogram. The pixels can then be directly moved in this color space, for example, by dragging a selection of clear pixels in the luminance histogram towards a darker zone. There are simple animations to understand the links between two representations of the same image, that can be similarly manipulated.


Animation to follow and understand the modifications made to a document over time.

When we produce a text document or source code, we usually take care to save different - more or less stable - versions in order to keep track of the writing process. Keeping different versions of the same document is useful when, for example, we want to find the content of an earlier version that has since been deleted or modified, or when we simply wish to compare versions.

To understand the changes between different versions, the tools currently available present:

  • Either a comprehensive list of the changes, as we can see on Wikipedia. This list shows the modified pieces of text out of context.
  • Or a side-by-side representation of two versions for a direct comparison: colors are used to highlight the text present in one or the other of the two versions. This presentation works well for lines of code, that can be easily aligned, but it remains less effective for long text where line-by-line matches are not always possible.
  • Or a representation of two combined versions, as with the "review mode" in Word, for example: additions are colored and deletions are struck through so that the changes are easy to spot. In the last example, although we can see changes in their context, we however neither see the two versions of the original document nor the final version: these need to be mentally rebuilt.

All of these options have good points and can be very effective when we know the versions we are searching for for comparison, but they are restricted to two versions in particular. To go further and show more than two versions, Diffamation proposes animating text between different versions of the same document. Diffamation incorporates sophisticated animations that neatly reveal text additions, modifications and deletions between two or more versions of the document.


A Markup language editor (e.g. HTML, LaTeX, Wiki) to instantly switch from source code to the document it produces, and vice versa. 

Markup languages are extremely widespread on the web, the most popular being, for example, Wiki or HTML. In a Markup document, all style and layout information, such as text formatting, fonts or special graphic elements like tables, are indicated by tags. This model, which separates the document's formatting from its content, has the advantage of enabling more generic editing of the final output of the document.  For example, it is possible to change the color of all of the titles in a Markup document in a single operation (all of the tagged titles will be affected), whereas this option would need to be changed one-by-one for each title in a traditional document (WYSIWIG). 

As of now, in order to edit Wiki, the manipulations are unnecessarily tedious: the Markup code of the document must be changed then, in order to see the result, the page has to be saved and compiled or reloaded (e.g. Wikipedia).

Markup languages are also used a lot by scientists, for example the editing language LaTeX, which offers a high quality of document layout and the editing of complex mathematical formulae. Here again, editing methods rely either on a save/show the output model, or a side-by-side visualization of the source code and rendered document. This side-by-side visualization method is quite effective, but can still be improved.

Gliimpse enables the source code to be instantly animated to the document it produces, without the need for repetitive save and compiling manipulations. Sophisticated animations make it possible to understand the link between the plain code text and the formatted text, images and other visual elements it produces. The animated transitions are optimized in order to effortlessly visualize the formatted representation of a tag-defined document.

To discover and test these three examples of animated transitions, come and visit the Inria plateau at EuraTechnologies, where you can talk with our partnership and innovation projects managers. You can also visit the TAN website and test the proposed demonstrations.


* Mjolnir team (together with Lille 1 University) within the Joint Research Unit UMR 9189 CNRS-Centrale Lille-Université Lille1, CRIStAL.