Motion/React Easing Configuration
easings.tsTypeScript

easings.ts

// Motion/React Easing Configuration
// Usage: Use these values with Motion's transition.ease property
// Example: transition={{ ease: easings["ease-out-cubic"] }}

type TEasing =
    | "linear"
    | "ease"
    | "ease-in"
    | "ease-out"
    | "ease-in-out"
    | "ease-in-sine"
    | "ease-out-sine"
    | "ease-in-out-sine"
    | "ease-in-quad"
    | "ease-out-quad"
    | "ease-in-out-quad"
    | "ease-in-cubic"
    | "ease-out-cubic"
    | "ease-in-out-cubic"
    | "ease-in-quart"
    | "ease-out-quart"
    | "ease-in-out-quart"
    | "ease-in-quint"
    | "ease-out-quint"
    | "ease-in-out-quint"
    | "ease-in-expo"
    | "ease-out-expo"
    | "ease-in-out-expo"
    | "ease-in-circ"
    | "ease-out-circ"
    | "ease-in-out-circ"
    | "ease-in-back"
    | "ease-out-back"
    | "ease-in-out-back";

const easings: Record<TEasing, readonly [number, number, number, number]> = {
    linear: [0, 0, 1, 1],
    ease: [0.25, 0.1, 0.25, 1],
    "ease-in": [0.42, 0, 1, 1],
    "ease-out": [0, 0, 0.58, 1],
    "ease-in-out": [0.42, 0, 0.58, 1],
    "ease-in-sine": [0.12, 0, 0.39, 0],
    "ease-out-sine": [0.61, 1, 0.88, 1],
    "ease-in-out-sine": [0.37, 0, 0.63, 1],
    "ease-in-quad": [0.11, 0, 0.5, 0],
    "ease-out-quad": [0.5, 1, 0.89, 1],
    "ease-in-out-quad": [0.45, 0, 0.55, 1],
    "ease-in-cubic": [0.32, 0, 0.67, 0],
    "ease-out-cubic": [0.33, 1, 0.68, 1],
    "ease-in-out-cubic": [0.65, 0, 0.35, 1],
    "ease-in-quart": [0.5, 0, 0.75, 0],
    "ease-out-quart": [0.25, 1, 0.5, 1],
    "ease-in-out-quart": [0.76, 0, 0.24, 1],
    "ease-in-quint": [0.64, 0, 0.78, 0],
    "ease-out-quint": [0.22, 1, 0.36, 1],
    "ease-in-out-quint": [0.83, 0, 0.17, 1],
    "ease-in-expo": [0.7, 0, 0.84, 0],
    "ease-out-expo": [0.16, 1, 0.3, 1],
    "ease-in-out-expo": [0.87, 0, 0.13, 1],
    "ease-in-circ": [0.55, 0, 1, 0.45],
    "ease-out-circ": [0, 0.55, 0.45, 1],
    "ease-in-out-circ": [0.85, 0, 0.15, 1],
    "ease-in-back": [0.36, 0, 0.66, -0.56],
    "ease-out-back": [0.34, 1.56, 0.64, 1],
    "ease-in-out-back": [0.68, -0.6, 0.32, 1.6],
} as const;

export { easings, type TEasing };
Updated: 11/1/2025