AutoAnimate
Add zero-config layout animations to lists, grids, and dynamic UIs with FormKit AutoAnimate. One directive — children fade, slide, and reorder smoothly.
This skill drops AutoAnimate into React, Vue, Svelte, or Solid projects. It animates child additions, removals, and reorderings automatically, with sensible defaults and overrides for duration, easing, and per-element opt-out.
animation autoanimate react vue svelte
When to use
Use when you want list and grid animations without writing variants, when prototyping with delightful motion, or as a lightweight Framer Motion alternative for simple cases.
Examples
Animated todo list
Drop AutoAnimate on a list and get add/remove/reorder animation for free
Wire AutoAnimate into a React todo list so adding, removing, and drag-reordering items animates smoothly
Filterable grid
Animate grid items as filters change
Apply useAutoAnimate to a product grid so items animate when category filters toggle