AutoAnimate - Add motion to your apps with a single line of code

A quick demo

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! 🎉

Installation

Install using your package manager of choice to add @formkit/auto-animate to your project:

Aaaaand, you’re done! That was fast. 🐇

Usage

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:

• A child is added in the DOM.
• A child is removed in the DOM.
• A child is moved in the DOM.

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:

Click me to open!

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.

Tips for success

• It’s still ok to use other kinds of transitions. For example, if you are making stylistic changes with just CSS (such as a hover effect), then use standard CSS transitions for these kinds of styling tweaks.
• Animations are only triggered when immediate children of the parent element (the one you passed to autoAnimate) are added, removed, or moved.
• The parent element will automatically receive position: relative if it is statically positioned. Keep this in mind when writing your styles.
• Sometimes flexbox layouts don’t resize their children immediately. A child with a 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.

Configuration

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
• Vue
• Preact
• Solid
• Svelte
• Angular

React hook

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 directive

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:

Vue composable

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:

• React
• Solid
• Vue
• Svelte
• Angular

Preact hook

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 Primitive

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 Directive

Solid users can also use the directive autoAnimate by importing it from @formkit/auto-animate/solid.

Svelte action

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 directive

Import AutoAnimateDirective from @formkit/auto-animate/angular into a module or a standalone component to easily add transitions and animations by applying the auto-animate attribute to the parent element in your template:

Disable animations

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.

• red
• green
• blue

Examples

List example

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.

Cards example

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.

Boxes (x/y axis) example

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.

FAQ accordion example

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!

FormKit validation example

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:

Plugins

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:

Why not...?

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.

Support us

Is AutoAnimate saving you time?
Please consider supporting our open-source efforts with a recurring or one-time donation! 🙏