The web is full of animated transitions…
…that sometimes annoy users,
with too much visual stimulation,
and that are often useless, because animation does not convey the appropriate information.
with too much visual stimulation,
and that are often useless, because animation does not convey the appropriate information.
However, when they are well designed, animated transitions can be highly effective.
Effectiveness is hard to reach. In order to best convey information, the initial animated transition design work is essential but complex, because it must account for several parameters, such as: duration, type of transformation, rhythms and sequences, trajectories…
On this page, you will discover three examples that illustrate the ongoing research on animated transition.
Animated transitions from images to histograms make photo manipulation applications effective and easier to understand.
Try out
Histomages
Requires a modern web browser with WebGL support.
Following changes between text revisions becomes easier thanks to sophisticated animated transitions that smoothly convey insertions and deletions while minimizing extraneous on-screen activity.
With one key press, the markup code of a document, such as a Wiki page or a LaTeX document, smoothly animates into its rendered form, making edition and layout tasks effortless.