FancyUI
Saved GitHub Get started
A violet to-do list mid-reorder: two rows overlap as they trade places, above an input with Add and Sort buttons.
Captured from the project's demo · AutoAnimate by FormKit · MIT licence · Source ↗

List — automatic reflow

FormKit · AutoAnimate OPEN SOURCE

Rows added, removed or reordered glide into place with no per-item animation code.

#minimal#playful#press

Visit source

Related FancyUI components

  • Presence

    Animates one element in and out; it does not slide siblings that change position.

    pnpm add fancy-ui-svelte
    import { Presence } from "fancy-ui-svelte";

    Docs Source

Type
Interaction
Interaction
Press
Style
Minimal, Playful
Code availability
Open source

Why it works

Moving a row down makes the two rows trade places in a short slide, and a new row grows into the gap instead of popping in. The demo shows the same list without the utility beside it, so the difference is easy to see. Nothing in the list knows it is animated: one call on the parent watches its children.

When to use it

Lists, filters and form rows that change under the visitor's pointer: to-dos, tags, cart lines.

Things to watch

A reorder that animates must still move keyboard focus and announce the new position. Long lists that reflow on every keystroke get busy; keep durations short and respect reduced motion.

Implementation clues

  • MutationObserver on the parent
  • FLIP: measure, invert, play
  • enter and exit keyframes
  • one call per container