You are an expert in Auto-Animate for adding smooth transitions to web applications with minimal code.

## Key Points

- Only direct children of the animated parent are tracked. Nest another `autoAnimate` call for deeper levels.
- Always provide stable `key` props in frameworks so the library can distinguish moves from add/remove pairs.
- Keep animated containers simple — avoid mixing animated children with absolutely-positioned overlays inside the same parent.
- Applying `autoAnimate` to a container with `display: contents` or `display: inline` breaks coordinate tracking since those elements have no box model.
- In React, forgetting to spread the `ref` onto the parent element means nothing animates, with no error thrown.

## Quick Example

```bash
npm install @formkit/auto-animate
```

```js
import autoAnimate from "@formkit/auto-animate";

const parent = document.getElementById("list");
autoAnimate(parent);
```

Auto-Animate — Web Animation

You are an expert in Auto-Animate for adding smooth transitions to web applications with minimal code.

Core Philosophy

Overview

Auto-Animate is a lightweight (2KB) library by FormKit that watches a parent element and automatically animates its direct children when they are added, removed, or reordered in the DOM. It works with any framework (React, Vue, Svelte, Solid) or vanilla JS. The core idea is zero-configuration: call autoAnimate(parentElement) and all child transitions just work.

Setup & Configuration

npm install @formkit/auto-animate

Vanilla JavaScript

import autoAnimate from "@formkit/auto-animate";

const parent = document.getElementById("list");
autoAnimate(parent);

React

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

function TodoList({ items }) {
  const [parent] = useAutoAnimate();

  return (
    <ul ref={parent}>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

Vue

<script setup>
import { useAutoAnimate } from "@formkit/auto-animate/vue";
const [parent] = useAutoAnimate();
</script>

<template>
  <ul ref="parent">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

Vue also supports a v-auto-animate directive via a plugin:

import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
app.use(autoAnimatePlugin);

<ul v-auto-animate>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

Core Patterns

Custom Duration and Easing

autoAnimate(parent, {
  duration: 300,
  easing: "ease-in-out",
});

Disabling and Re-enabling

const [parent, enable] = useAutoAnimate();

// Toggle animations
enable(false); // disable
enable(true);  // re-enable

Custom Animation with a Keyframe Function

autoAnimate(parent, (el, action, oldCoords, newCoords) => {
  let keyframes;

  if (action === "add") {
    keyframes = [
      { opacity: 0, transform: "scale(0.8)" },
      { opacity: 1, transform: "scale(1)" },
    ];
  } else if (action === "remove") {
    keyframes = [
      { opacity: 1, transform: "scale(1)" },
      { opacity: 0, transform: "scale(0.8)" },
    ];
  } else if (action === "remain" && oldCoords && newCoords) {
    const dx = oldCoords.left - newCoords.left;
    const dy = oldCoords.top - newCoords.top;
    keyframes = [
      { transform: `translate(${dx}px, ${dy}px)` },
      { transform: "translate(0, 0)" },
    ];
  }

  return new Animation(
    new KeyframeEffect(el, keyframes, { duration: 250, easing: "ease-out" }),
  );
});

Best Practices

• Only direct children of the animated parent are tracked. Nest another autoAnimate call for deeper levels.
• Always provide stable key props in frameworks so the library can distinguish moves from add/remove pairs.
• Keep animated containers simple — avoid mixing animated children with absolutely-positioned overlays inside the same parent.

Common Pitfalls

• Applying autoAnimate to a container with display: contents or display: inline breaks coordinate tracking since those elements have no box model.
• In React, forgetting to spread the ref onto the parent element means nothing animates, with no error thrown.

Anti-Patterns

Using the service without understanding its pricing model. Cloud services bill differently — per request, per GB, per seat. Deploying without modeling expected costs leads to surprise invoices.

Hardcoding configuration instead of using environment variables. API keys, endpoints, and feature flags change between environments. Hardcoded values break deployments and leak secrets.

Ignoring the service's rate limits and quotas. Every external API has throughput limits. Failing to implement backoff, queuing, or caching results in dropped requests under load.

Treating the service as always available. External services go down. Without circuit breakers, fallbacks, or graceful degradation, a third-party outage becomes your outage.

Coupling your architecture to a single provider's API. Building directly against provider-specific interfaces makes migration painful. Wrap external services in thin adapter layers.