@formkit/auto-animate

Add motion to your apps with a single line of code.

weekly downloads533K

versionv0.9.0

licenseMIT

categoryanimation

animationtransitionreactpreactvueangularsveltesolid

Overview

@formkit/auto-animate is a lightweight animation utility that automatically adds smooth transitions when DOM elements are added, removed, moved, or reordered. Unlike traditional animation libraries that require explicit configuration for each transition, this package uses a MutationObserver to detect DOM changes and applies appropriate animations automatically.

The package solves a common pain point in modern web development: making UI changes feel polished without the overhead of complex animation frameworks. It's framework-agnostic at its core, but provides dedicated hooks and integrations for React, Vue, Angular, Svelte, Solid, and Preact. At approximately 3.28kb with zero dependencies, it's designed for developers who want smooth animations without the bundle size cost of heavyweight solutions.

With over 500k weekly downloads, the package has gained traction among developers building dynamic interfaces like sortable lists, form validation feedback, accordion menus, and CRUD operations where elements frequently enter and exit the DOM. The default configuration works immediately, but the API exposes duration, easing, and delay options for customization. Advanced users can override the animation logic entirely through a plugin system.

The package originated from FormKit's ecosystem and integrates natively with FormKit forms, but it functions entirely independently and can be used in any JavaScript project. It's particularly valuable in applications where animations improve user comprehension of state changes—helping users track what changed, where elements moved, and how the interface responded to their actions.

Quick Start

typescript

import { useAutoAnimate } from '@formkit/auto-animate/react';
import { useState } from 'react';

function TodoList() {
  const [parent] = useAutoAnimate({ duration: 300, easing: 'ease-in-out' });
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn auto-animate' },
    { id: 2, text: 'Build something cool' }
  ]);

  const addTodo = () => {
    const newTodo = {
      id: Date.now(),
      text: `New task ${todos.length + 1}`
    };
    setTodos([...todos, newTodo]);
  };

  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      <ul ref={parent}>
        {todos.map(todo => (
          <li key={todo.id}>
            <span>{todo.text}</span>
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Use Cases

Dynamic list management: Automatically animate items in todo lists, shopping carts, or data tables when users add, remove, or reorder entries. The library handles the complexity of tracking position changes and applying appropriate slide/fade animations without manual intervention.

Form validation feedback: Smoothly animate error messages appearing and disappearing below form fields as users type or submit. The animation helps draw attention to validation issues without jarring the user experience, and integrates directly with FormKit forms through the addons package.

Accordion and collapsible sections: Animate content expansion and collapse in FAQ sections, navigation menus, or settings panels. The automatic height detection means you don't need to pre-calculate dimensions or write custom CSS transitions for variable-height content.

Real-time data updates: Apply subtle animations to dashboard widgets, notification lists, or live feeds when new data arrives or existing items update. This helps users distinguish fresh content from existing information without overwhelming the interface.

Drag-and-drop interfaces: Enhance sortable lists or kanban boards by animating items as they're dragged between positions or columns. The library automatically handles the re-flow of surrounding elements, creating a polished interaction pattern with minimal code.

Pros & Cons

Pros

+Extremely low implementation cost—often a single function call to enable animations across an entire component or section
+Tiny bundle footprint (3.28kb) with zero dependencies makes it suitable for performance-sensitive applications
+Framework-agnostic core with first-class support for all major frameworks through dedicated hooks and plugins
+Sensible defaults work immediately without configuration, but customization options exist for advanced use cases
+Non-invasive approach using refs means animations don't pollute global scope or conflict with existing styles

Cons

−Limited control over individual element animations—it's an all-or-nothing approach for a given parent element
−Complex keyframe animations or physics-based effects require workarounds through the plugin system rather than built-in APIs
−Documentation for advanced customization scenarios is limited compared to mature animation libraries
−May not be suitable for applications requiring precise choreography of multiple simultaneous animations with dependencies
−Performance can degrade with extremely large lists (hundreds of elements) due to MutationObserver overhead

Alternatives

animejsv4.3.6

JavaScript animation engine

animationanimeanimejs

543K / week

framer-motionv12.34.2

A simple and powerful JavaScript animation library

animationreact animationreact

22.4M / week

gsapv3.14.2

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,

animationGSAPGreenSock

1.8M / week

motionv12.34.2

An animation library for JavaScript and React.

animationjavascript animationreact animation

4.3M / week

react-springv10.0.3

frontendanimatedanimation

838K / week

Install

bash

npm install @formkit/auto-animate

bash

pnpm add @formkit/auto-animate

bash

bun add @formkit/auto-animate

Overview

Quick Start

typescript

import { useAutoAnimate } from '@formkit/auto-animate/react';
import { useState } from 'react';

function TodoList() {
  const [parent] = useAutoAnimate({ duration: 300, easing: 'ease-in-out' });
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn auto-animate' },
    { id: 2, text: 'Build something cool' }
  ]);

  const addTodo = () => {
    const newTodo = {
      id: Date.now(),
      text: `New task ${todos.length + 1}`
    };
    setTodos([...todos, newTodo]);
  };

  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      <ul ref={parent}>
        {todos.map(todo => (
          <li key={todo.id}>
            <span>{todo.text}</span>
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Use Cases

Pros & Cons

Pros

+Extremely low implementation cost—often a single function call to enable animations across an entire component or section
+Tiny bundle footprint (3.28kb) with zero dependencies makes it suitable for performance-sensitive applications
+Framework-agnostic core with first-class support for all major frameworks through dedicated hooks and plugins
+Sensible defaults work immediately without configuration, but customization options exist for advanced use cases
+Non-invasive approach using refs means animations don't pollute global scope or conflict with existing styles

Cons

−Limited control over individual element animations—it's an all-or-nothing approach for a given parent element
−Complex keyframe animations or physics-based effects require workarounds through the plugin system rather than built-in APIs
−Documentation for advanced customization scenarios is limited compared to mature animation libraries
−May not be suitable for applications requiring precise choreography of multiple simultaneous animations with dependencies
−Performance can degrade with extremely large lists (hundreds of elements) due to MutationObserver overhead