lib/reorder-motion

Import

Import

import * as api from "@fungi.computer/caps/lib/reorder-motion";

Exports

Kind	Export	Description
constconstant	reorderKeyAttribute	The attribute that names one keyed child of a list with list motion.
fnfunction	useListMotion()	Motion for a keyed list. Rows that arrive fade in over the theme’s travel (staggered by --stipe-motion-stagger) once the list has unrolled to make room. A row that leaves fades where it stood first; then the rest close ranks, gliding to their places (FLIP on the Web Animations API) as the list eases to its new height. Everything reads the theme’s motion tokens; reduced motion keeps only short fades and nothing travels. Children opt in with data-reorder-key, and the first render is still.

reorderKeyAttributeconstconstant

Signature

const reorderKeyAttribute: "data-reorder-key" = "data-reorder-key";

The attribute that names one keyed child of a list with list motion.

useListMotion()fnfunction

Signature

function useListMotion(container, order): void;

Motion for a keyed list. Rows that arrive fade in over the theme’s travel (staggered by --stipe-motion-stagger) once the list has unrolled to make room. A row that leaves fades where it stood first; then the rest close ranks, gliding to their places (FLIP on the Web Animations API) as the list eases to its new height. Everything reads the theme’s motion tokens; reduced motion keeps only short fades and nothing travels. Children opt in with data-reorder-key, and the first render is still.

Parameters

Parameter	Type
container	RefObject<HTMLElement | null>
order	readonly string[]

Returns

void