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