@formkit/auto-animate
> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.
@formkit/auto-animate
General JS> Add smooth transitions to any element with a single line — zero-config animations for adds, removes, and moves.
Fit
Bundle (gzip)
3.2 kB
8.3 kB raw
Install size includes transitive dependencies. Bundle size is gzipped browser payload.
Freshness
The Problem
Lists that add, remove, or reorder items jump abruptly, which feels jarring. Wiring up FLIP animations or transition groups by hand for every dynamic list is tedious and easy to get subtly wrong.
What It Does
AutoAnimate is a ~2kb utility that you attach to a parent element. Whenever its direct children are added, removed, or moved, it automatically animates the change with a smooth default transition — no keyframes, no config. It ships adapters for React, Vue, Solid, Angular, and plain JS.
Installation
npm install @formkit/auto-animateUsage Example
import { useAutoAnimate } from '@formkit/auto-animate/react';
export function TodoList({ items }) {
const [parent] = useAutoAnimate();
return (
<ul ref={parent}>
{items.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}Related packages
Unified TypeScript SDK for building AI-powered apps — switch between 20+ LLM providers without rewriting code.
animejsGeneral JSLightweight JavaScript animation library with a tiny footprint and a powerful, expressive API.
AOSGeneral JSAn easy-to-use library that makes elements fade, slide, or zoom into view as the user scrolls down your page.
archiverGeneral JSStreaming interface for generating ZIP and TAR archives in Node.js — create compressed archives programmatically from files, directories, and buffers.
axiosGeneral JSPromise-based HTTP client for the browser and Node.js — interceptors, automatic JSON parsing, request cancellation, and progress events.