Data Viz - (Timing|Easing) Function

Utah Teapot


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 life don’t just start and stop instantly, and almost never move at a constant speed. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

Timing Curves describe the pace with which a transform changes between each keyframe. Each timing curve is modeled as a cubic bezier curve from point [0, 0] to [1, 1], where the X value is the progression in time from the origin keyframe to the destination keyframe, and the Y value describes the amount of change in the value at a given time:

<MATH> origValue + (destValue - origValue) * Y </MATH>


  • “elastic”,
  • “cubic-in-out”
  • and “linear”


They are generally:


Documentation / Reference

Discover More
Css - Timing Function

Timing function in CSS
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 - 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...

Share this page:
Follow us:
Task Runner