AutoAnimate

AutoAnimate is a small drop-in utility that adds motion when elements are added, removed or moved in the DOM. It works with React, Vue, Svelte and plain JavaScript.

You attach AutoAnimate to a parent element, and it animates that parent's immediate children when they change. The markup of each child does not need to change, so you can add it to existing code, including third-party code. Framework helpers are available for React, Vue and other libraries, and the plain JavaScript version works anywhere. The docs include a demo that compares a list with and without the utility, which shows the difference clearly.

• Animates added, removed and moved children
• One function call on a parent element
• Helpers for React and Vue
• Works with plain JavaScript
• Works with markup you did not write

Developers who want small, quick motion on lists, menus and other groups of items. Teams that want to add polish to an interface without writing animation code by hand will find it useful.

AutoAnimate is open source under the MIT license, so it is free to use. Animations run when children are added, removed or moved, so attach it to the container that changes. The project is maintained by the FormKit team, which also publishes a React form library.