Viz - (Animated) Transition

Utah Teapot


Transition create animated smooth transition between two different state of a graphic object.

Instead of changing instantaneously, transitions smoothly interpolate the object from its current state to the desired target state (keyframe) over a given duration.

Most often, a transition is just a single stage, transitioning from the current state of the object to the desired target state (keyframe).

Animated transitions can significantly improve graphical perception.


Transitions are often initiated by events, such as:

  • the arrival of new data over the wire
  • or user interaction.


Since transitions are not instantaneous — they have a duration — that could mean multiple transitions competing to control the fate of elements. To avoid this, transitions should be exclusive, allowing a newer transition to pre-empt (to interrupt) an older one. However, such exclusivity should not be global. Multiple concurrent transitions should be allowed, as long as they operate on different elements.

Example: If you quickly toggle between stacked and grouped bars below, you can send waves rippling across the chart: See Stacked-to-Grouped Bars.


Animate between two SVG paths or canvas shapes in a visualization when the shapes

Library does not correspond to each other really well ?
Flubber No
d3/d3-transition Yes

Documentation / Reference

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...
CSS - Transitions

in CSS. Transition properties create smooth transitions (using timing functions) between different values property of two different element state. The transition short property is where: transition-durationtransition-duration:...
Card Puncher Data Processing
D3 - Transition

Transition implementation in D3 d3/d3-transition A transition happens on a selections of element. Immediately after creating a transition, such as by selection.transition or transition.transition, you...
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 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: native (declarative ones), such as the element...
Javascript - Transition

in Javascript getbootstrap transitions
Event Centric Thinking
Streaming Visualization

Streaming implied the notion of time and most of the streaming visualization are time series visualization where the origin of the x axis is moving at each refresh interval (ie the data below the origin...
Card Puncher Data Processing
Video / Motion / Animation / Film

A video is : a sequence of image called frame shown at the frequency called frequence rate (per second) compressed to follow a bitrate. Movies at first were called moving pictures. A good example...

Share this page:
Follow us:
Task Runner