Try one

Each keyframe names the ease of the stretch that leaves it, toward the next keyframe. Pick one: the ball, the curve and the data change together.

0.0 / 2.2 s

Family

Kind

clip.json

{
  "duration": 2.2,
  "tracks": [
    {
      "targetUid": "ball",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "back.out" },
        { "time": 1.5, "value": 280 }
      ]
    }
  ]
}

Every family at once

The same move on every family, all starting and ending together. Switch between in, out and in-out to compare them.

0.0 / 2.6 s

Kind

race.json

{
  "duration": 2.6,
  "tracks": [
    {
      "targetUid": "race-none",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "none" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-power1",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "power1.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-power2",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "power2.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-power3",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "power3.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-power4",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "power4.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-sine",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "sine.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-circ",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "circ.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-expo",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "expo.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-back",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "back.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-elastic",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "elastic.out" },
        { "time": 1.8, "value": 476 }
      ]
    },
    {
      "targetUid": "race-bounce",
      "property": "x",
      "keyframes": [
        { "time": 0.3, "value": 0, "easing": "bounce.out" },
        { "time": 1.8, "value": 476 }
      ]
    }
  ]
}

Writing an ease

An ease is a name: a family, then .in, .out or .inOut. A family on its own means .out. Some families take numbers in brackets, like back.out(1.7).

A keyframe with no easing uses power1.inOut. A name the engine doesn't know uses it too, and the clip notes it in program.skipped.

none: Steady from start to end. linear is the same.
power0 to power4: power0 is steady; each step up is a stronger curve.
sine: The gentlest curve.
circ: A quarter circle: very soft at one end, sharp at the other.
expo: The sharpest curve.
back(overshoot)default 1.70158: Goes past the mark and comes back. A bigger number goes further.
elastic(amplitude, period)default 1, 0.3: Springs around the mark. In-out's period is 0.45 by default.
bounce: Bounces on the mark, each bounce lower.
cubic-bezier(x1, y1, x2, y2): Any CSS cubic bezier curve.

Eases in code

easeFor gives any ease as a function from progress (0 to 1) to how far along the value is. The curve on this page is drawn with it.

easeFor(name)EaseFn | null: The ease as (p: number) => number, or null for a name it doesn't know.
DEFAULT_EASEstringdefault "power1.inOut": The ease a keyframe with none leaves along.

NextTransforms and pivots