AutoAnimate Transitions

Add zero-config motion to any UI with FormKit AutoAnimate. Drops a single directive onto a parent element to smoothly animate children as they are added, removed, or reordered — across React, Vue, Svelte, Solid, and vanilla JS.

This skill helps you apply AutoAnimate for instant, low-effort transitions. It wires the useAutoAnimate hook or directive to lists, accordions, and layout containers so DOM changes animate automatically, tunes duration and easing, respects prefers-reduced-motion, and enables/disables animation conditionally without rewriting components.

When to use

Use when you want smooth add/remove/reorder animations with almost no code — todo lists, filterable grids, accordions, form field arrays, or any container whose children change.

Examples

Animated filterable list

Smoothly reflow a list on filter

Add FormKit AutoAnimate to a filterable product grid so items animate in and out when the active filter changes

Accordion motion

Animate expanding sections

Use the useAutoAnimate hook to smoothly animate an FAQ accordion opening and closing, respecting prefers-reduced-motion