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

  • NumberFlow
    Preview of NumberFlow

    NumberFlow

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

    excellent agent friendlinessPackageFreeOpen source
  • GSAP

    GSAP

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

    excellent agent friendlinessPackageFreeStaff pick
  • Lenis
    Preview of Lenis

    Lenis

    Smooth scrolling that doesn't fight the browser.

    excellent agent friendlinessPackageFreeOpen source
  • Anime.js
    Preview of Anime.js

    Anime.js

    A lightweight, framework-free animation library with a beautiful API.

    excellent agent friendlinessPackageFreeOpen source