Data Vizualisation - Animation

Utah Teapot

Data Vizualisation - Animation


Animation is defined as a series of steps from one object state to another through transition.

Animations in web browsers come in two forms:


An Animation is just sequences of different state with or without Transition. Therefore you can create an animation with:

  • Snapshot: With a series of snapshot, you can create an animated GIF (with Gimp for instance) (no scalability anymore as it's a raster image)
  • Transition: Define a transition inside your SVG or HTML element. All major web browsers support transitions via CSS or Javascript.



A sequence of frames is called a tween. See Data Viz - Inbetween - Tweening, Interpolation (Animation)

Frame Frequency

  • on twos: 12 drawings per second. The film Fantasmagorie (1908) gives a good example and was considered the first fully animated movie.
  • When the number of inbetweens is too few, such as 4 frames per second, it will begin to lose the illusion of movement altogether.
  • Slow movements may be animated on threes or fours.



  • Bounce
  • Fade
  • Flip
  • Slide
  • Zoom

Twelve basic principles


Animation Software

All software that can draw can animate but some framework are more animation focus than other.


Documentation / Reference


Evolution of <img>: Gif without the GIF by Colin Bendell

Twitter thread

Discover More
Browser - Rendering

Rendering is a page load phase that consists of generating an output that can be read by the client. Render tree building stage: The CSSOM and DOM trees are combined into a render tree. Before the...
Card Puncher Data Processing
D3 - Animation

in D3 Animated transitions can be derived from selections using the transition operator.
Data Visualization - Visual Primitive

Visual Primitive are the basic block of visual. See also: shapes Point, Bar, Line, ... color, position, animation length ...
Utah Teapot
Data Viz - (Timing|Easing) Function

Timing function (also known as easing) are used in transition to calculate the speed and smooth of the animation between state. They specify the rate of change of a parameter over time. Objects in real...
Utah Teapot
Data Viz - Inbetween - Tweening, Interpolation (Animation)

In animation, InbetweeningInbetweening, tweening or Interpolation_(computer_graphics)Interpolation is the process of generating intermediate frames between two images, called key frame, to give the appearance...
Utah Teapot
Data Vizualization - Encoding / Decoding

Graphical perception: the visual decoding of information encoded on graphs. ie when people extract quantitative information from graphs. Data visualization encode the quantitative information in visual...
Image Intrinsic Dimension

gif is an image format. It is normally recommended to save drawings in the webp or png format rather than the GIF format. But for animation, as the animated versions of the PNG format, MNG and APNG, have...
Card Puncher Data Processing
List of SVG Editors / Software and Utility

This page lists editors, libraries or GUI software that can manipulate SVG. GUI * ! * From Svg to Code and vice versa: ()...
Card Puncher Data Processing
SMIL - Synchronized Multimedia Integration Language (Interactive audiovisual)

A language for authoring interactive audiovisual presentations. SVG can uses SMIL for animation (in addition to JavaScript). Unfortunately, SMIL is not supported by Internet Explorer 9 or Edge. All...
Card Puncher Data Processing
SVG - Animate

The animate element in SVG permits to declaratively create animation See

Share this page:
Follow us:
Task Runner