flip-motion

Tiny FLIP animation utility (translate + optional scale) with Promise-based play and reduced-motion support.

Install

Install from npm:

``bash
npm install @mkja/flip-motion
`

Usage

`js
import flip from '@mkja/flip-motion';

const elements = document.querySelectorAll('li');
const ctrl = flip(elements);

// Mutate DOM (reorder/insert/remove)
// ...

await ctrl.play({ duration: 300, easing: 'ease' }).finished;
`

API

- flip(elements) → controller with:
- play(options) → { animations: Animation[], finished: Promise, cancel() }
- measure() → refresh internal measurements
- update([elements]) → rebind or just refresh measurements
- cancel() → cancel in-flight animations
- disconnect() → release references

$3

- duration (ms, default 100)
- easing (default ease)
- delay (default 0)
- stagger (ms per index, default 0)
- fill (default auto)
- direction (default normal)
- composite (default add)
- shouldScale (default true)
- respectReducedMotion (default true)
- transformOrigin (default "0 0")
- epsilon (px threshold to skip, default 0.5)

Development

- Dev demo: npm run dev (serves test/index.html with Vite)
- Tests: npm test
- Lint: npm run lint
- Format: npm run format

Browser support

Uses WAAPI (element.animate). If unavailable, calls are no-ops. Honors prefers-reduced-motion`.

License

MIT