Table of Contents

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>

Name

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

Implementation

They are generally:

Library

Documentation / Reference