[ @sdxc/ui/animations ]

easings

Named transition-timing-function curves shared by every animation factory, component.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { easings } from "@sdxc/ui/animations";

Signature

const easings = {
	/** The general-purpose curve for enter/exit transitions: gentle acceleration, gentle deceleration. */
	standard: "cubic-bezier(0.4, 0, 0.2, 1)",
	/** Starts fast and settles slowly; reads as an element arriving into place. Suits entrances. */
	decelerate: "cubic-bezier(0, 0, 0.2, 1)",
	/** Starts slowly and leaves quickly; reads as an element departing the screen. Suits exits. */
	accelerate: "cubic-bezier(0.4, 0, 1, 1)",
	/** Constant rate from start to end; matches the platform's own `linear` keyword. */
	linear: "linear",
} as const

Examples

fade({ easing: easings.decelerate });

transitionTimingFunction: easings.standard,