Easing functions

Evaluate a common easing curve at progress t between 0 and 1.

JavaScript Version 1.0.0 · MIT · .md

function ease({ name, t }) { return { linear: t, easeInQuad: t * t, easeOutQuad: t * (2 - t), easeInOutQuad: t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t, easeInCubic: t ** 3, easeOutCubic: (t - 1) ** 3 + 1 }[name]; }

Input & expected output

{
  "name": "easeInOutQuad",
  "t": 0.25
}

0.125

The edge case

{
  "name": "easeOutQuad",
  "t": 1
}

1

Know the limits

• The original listed separate functions; one function selects the curve by name. Curves follow the gist the original cites (gre/1650294).
• Prefer CSS transitions for UI motion and honour prefers-reduced-motion.

The function above is the implementation used by the lab. The lab validates JSON types and caps size before execution; include equivalent validation when accepting untrusted input in your application.

Keep exploring

• Convert Celsius to Fahrenheit — Apply the temperature conversion without rounding the result.
• Convert hex to RGB — Expand #rgb if needed and read the red, green and blue channels.
• Convert URL parameters to object — Read a query string into an object; repeated keys become arrays.