AutoAnimate

Qué es

AutoAnimate es una utilidad de animación de código abierto creada por el equipo de FormKit. Es “drop-in” y sin configuración: detecta cuándo los hijos directos de un elemento del DOM se añaden, se eliminan o cambian de posición, y les aplica una transición suave de forma automática. Está escrita en TypeScript, se distribuye en npm como @formkit/auto-animate y se publica bajo licencia MIT.

Para qué sirve

• Animar listas que crecen, se reordenan o pierden elementos sin escribir CSS de transición a mano.
• Suavizar cambios de layout como filtros, búsquedas en vivo o acordeones que se abren y cierran.
• Añadir movimiento a una interfaz existente cambiando muy poco código, normalmente una sola línea.
• Mantener una experiencia coherente entre frameworks reutilizando la misma utilidad.

Cuándo usarlo

• Cuando quieres animaciones de entrada, salida y reordenación “buenas por defecto” sin invertir tiempo en orquestarlas.
• Es ideal para proyectos donde el movimiento es secundario y prima la rapidez. Si necesitas control fino sobre keyframes, gestos o secuencias complejas, conviene una librería más completa como Framer Motion (React) o GSAP.

Ejemplo

Instalación y uso básico en JavaScript:

npm install @formkit/auto-animate

import autoAnimate from '@formkit/auto-animate'

const lista = document.querySelector('#lista')
autoAnimate(lista)

Uso en React con el hook oficial:

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

function Lista() {
  const [parent] = useAutoAnimate()
  return <ul ref={parent}>{/* los hijos se animan solos */}</ul>
}

A partir de ahí, cualquier hijo que se añada, se quite o cambie de orden dentro del elemento se anima sin más configuración.

Puntos clave

• Sin configuración: basta con pasar el elemento padre y los hijos se animan solos.
• Integraciones oficiales para React, Vue, Svelte, Solid, Angular y Preact, además de JavaScript puro y web components.
• Muy ligera y enfocada solo en las transiciones de añadir, quitar y reordenar elementos.
• Animaciones personalizables en duración y curva de easing, con respeto a prefers-reduced-motion.

Ten en cuenta

Solo anima los hijos directos del elemento al que se aplica y se centra en aparición, desaparición y reposicionamiento; no es una herramienta de animación general. Para transiciones encadenadas, gestos o control detallado de keyframes necesitarás otra solución. El proyecto se mantiene activo, aunque su numeración (v0.9.0) indica que aún no ha alcanzado una versión 1.0 estable.