Auto Animate Library

Auto Animate is a zero-configuration animation utility that adds smooth transitions to web interfaces with a single function call. Developed by FormKit, the library works by observing DOM mutations through a MutationObserver, detecting when elements are added, removed, or repositioned, and automatically applying FLIP-based transitions to animate those changes without any developer-written animation code. To activate animations on any container element, developers call the autoAnimate function passing the DOM node as an argument, and every subsequent child element insertion, deletion, or reordering within that container will animate smoothly. The library weighs approximately two kilobytes minified and gzipped, making it negligible in bundle size, and it ships as a single function with no configuration objects required for default usage. Under the hood, the animation engine measures the before and after positions of affected elements, computes the delta, applies an inverse transform to make the element appear in its old position, then animates it to the new position over a configurable duration. Supported scenarios include list reordering, accordion expand and collapse, tab switching, dynamic form field addition and removal, notification stack management, and any UI where the DOM structure changes in response to user interaction or data updates. Framework-specific packages are available for React, Vue, Svelte, Solid, and Preact, each providing hooks or directives that integrate with the framework reactivity system. Configuration options allow disabling animations for specific elements, adjusting duration and easing, and customizing the enter and exit behavior for elements that should fade rather than slide.