# Data Viz - (Timing|Easing) Function

> (Data|State) Management and Processing > Data Visualization Foundation

### Table of Contents

## 1 - About

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>

## 2 - Articles Related

## 3 - Name

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

## 4 - Implementation

They are generally:

- Bezier curve (key points are close)
- Cardinal_spline (typical interpolation in 2D)
- nonuniform rational B-spline (key points are close)