AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Solid, Vue, Svelte, or any other JavaScript application.
made with ♥ by the FormKit team.AutoAnimate adds automatic animations to your JavaScript applications with a single line of code. Here's the same list component with and without AutoAnimate applied to the wrapping element:
That's a notable improvement in UX with no additional developer effort! 🎉
Install using your package manager of choice to add @formkit/auto-animate to your project:
Aaaaand, you’re done! That was fast. 🐇
AutoAnimate is fundamentally a single function — autoAnimate — that accepts a parent element. Automatic animations will be applied to the parent element and its immediate children. Animations are specifically triggered when one of three events occurs:
Let’s see what this looks like in practice. For now we'll use the autoAnimate function directly. React and Vue users — you’ll get some additional syntactic sugar later on — but for now let's learn the fundamentals:
Too easy! A gentle, smooth shift without adding any transition classes or custom CSS. This is a notable upgrade for end users with minimal developer effort required. Checkout the examples to see other use cases.
autoAnimate) are added, removed, or moved. position: relative if it is statically positioned. Keep this in mind when writing your styles. flex-grow: 1 property waits for the surrounding content before snapping to its full width. AutoAnimate doesn’t work well in these cases, but if you give the element a more explicit width it should work like a charm. AutoAnimate is intended to be used with zero-configuration. We believe the default configuration falls in line with the project’s objective: AutoAnimate’s goal is to substantially improve an application’s user-experience without impacting the developer’s implementation time or performance budget. That said, some minor configuration options are available. AutoAnimate allows you to pass a second argument to autoAnimate with the following options:
If your project’s specific requirements make it necessary to dramatically change the default animations, then you should check out the plugins documentation. Next, checkout the usage documentation for your framework.
React users can use the hook useAutoAnimate by importing it from @formkit/auto-animate/react. This hook returns a ref to apply to the parent element, as well as a function to enable or disable animations.
Vue users can globally register the v-auto-animate directive or install the Nuxt module. This makes adding transitions and animations as easy as applying an attribute. Import the Vue plugin from @formkit/auto-animate/vue and register it with your Vue app:
Once you’ve registered the plugin, it can be applied anywhere in your application by adding the v-auto-animate directive to the parent element:
As an alternative to the v-auto-animate directive, Vue devs can use the useAutoAnimate composable. This composable supports all the same great features, but also provides a mechanism to enable and disable animations.
Import the composable from @formkit/auto-animate/vue (the Nuxt module will automatically import useAutoAnimate for you), and call it in script setup to create a template ref. Use the ref attribute on your parent element to store it in the template ref:
Preact users can use the hook useAutoAnimate by importing it from @formkit/auto-animate/preact. This hook returns a ref to apply to the parent element, as well as a function to enable or disable animations.
Solid users can use the function createAutoAnimate by importing it from @formkit/auto-animate/solid. This hook returns a ref to apply to the parent element, as well as a function to enable or disable animations.
Solid users can also use the directive autoAnimate by importing it from @formkit/auto-animate/solid.
The root autoAnimate function can be directly used as a Svelte action. Just import autoAnimate and use it as a directive on the parent element.
Angular users can globally register the auto-animate directive. This makes adding transitions and animations as easy as applying an attribute. Import the AutoAnimateModule from @formkit/auto-animate/angular and register it with your Angular app:
Once you’ve registered the plugin, it can be applied anywhere in your application by adding the auto-animate directive to the parent element:
Occasionally it may be necessary to temporarily disable animations and then re-enable them later on. The autoAnimate function returns an animation controller with enable() and disable() methods for this purpose, and the Vue and React hooks (useAutoAnimate) return a tuple with the second value being an enable/disable function that accepts a boolean to enable or disable animations.
Add and remove fruits from a list. Note that fruits are placed at random locations in the list to simulate injecting items rather than just pushing and unshifting.
Simulates showing a form to add an event to a list of event cards. Notice that it pushes it to the front of the list and all the cards animate to their destination, and the parent element (invisible) resizes smoothly to accommodate.
An important feature of AutoAnimate is that it operates on both the x and y axis. Items that are moved in the DOM from one location to another, or are wrapping at the end of a line will automatically be translated to their respective position.
We’ve all had to create accordions before. Pretty easy on the surface, but adding motion to the open/close sequence can be frustrating to say the least, and if you hack it together using max-height transitions, you are sure to lose your easing. No more!
We needed a way to animate DOM elements without adding to the virtual DOM in Vue and React. And it turned out our solution was gonna work great for lots of other use cases as well.
You don’t have to use FormKit to use AutoAnimate, but if you are a FormKit user, there are some neat things you can do. For example, you can use AutoAnimate to animate validation messages being added and removed from an input:
While AutoAnimate is intended to be used with its zero-config defaults, some users may need to replace the default animation keyframes with custom ones. To do this, provide a function as the second argument of the autoAnimate function. This function will be called before every animation and must return a KeyframeEffect.
Here we will create a new set of keyframes for the add, remove and remain actions that overshoot their destinations to create a "bouncy" animation effect.
We can use our newly defined keyframes in any previous example to see the effect it has. Here's our previous list example with the "bouncy" keyframes applied to it:
There are loads of Animation libraries available for JavaScript and each has its place. AutoAnimate is not a traditional animation library — think of it more as "Prettier for motion" — it is an easy-to-implement standard you can quickly apply to any project.
AutoAnimate’s goal is to smooth out changes to the DOM that are otherwise confusing to end-users. For example, when a user sorts a list with no animations, it is difficult to visualize how the items in the list have actually changed — but with AutoAnimate the changes suddenly make intuitive sense. AutoAnimate was made to solve this category of problem via a drop-in solution with zero-config.
Is AutoAnimate saving you time?
Please consider supporting our open-source efforts with a recurring or one-time donation! 🙏