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: relativeif it is statically positioned. Keep this in mind when writing your styles.
flex-grow: 1property 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.
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:
Vue users can globally register the
v-auto-animate directive. 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:
autoAnimate function can be directly used as a Svelte action. Just import
autoAnimate and use it as a directive on the parent element.
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
Here we will create a new set of keyframes for the
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:
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! 🙏