Skip to content
don’t make it ugly
All resources

PackageMotion

AutoAnimate

One line of code that animates list changes for you.

Staff pickOpen sourceFree
Visit website (opens in a new tab)View GitHub (opens in a new tab)
Preview of AutoAnimate

What it is

AutoAnimate from FormKit is a zero-config utility: attach it to a parent element and any child added, removed or moved animates smoothly. Works with React, Vue, Svelte, Solid, Angular and vanilla JS. About 2kB.

Why it’s here

The highest return on effort in this whole directory. Todo lists, filters, notifications, anything that adds or removes items, instantly feels polished.

Best for

  • animating lists
  • filter results
  • beginners
  • quick wins

Can my agent use this?

Agent excellent agent friendliness

Yes. The whole API is a single hook or function. Tell your agent to "add AutoAnimate to the list container".

Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.

Access methods

  • Docs
  • GitHub
  • npm

Install

npm install @formkit/auto-animate

Related resources

  • Motion-Primitives
    Preview of Motion-Primitives

    Motion-Primitives

    Tasteful animated components for React, built with Motion.

    Component libraryFreeOpen sourceexcellent agent friendliness
    Staff pick
  • NumberFlow
    Preview of NumberFlow

    NumberFlow

    Animated number transitions that make counters, prices and stats feel expensive.

    PackageFreeOpen sourceexcellent agent friendliness
  • Rive
    Preview of Rive

    Rive

    Interactive vector animations with state machines, playable in any app.

    ToolOpen sourcegood agent friendliness
  • GSAP

    GSAP

    The professional-grade animation toolkit, now free including all plugins.

    PackageFreeexcellent agent friendliness
    Staff pick