DEV Community

Cover image for Introducing AutoAnimate — add motion to your apps with a single line of code.
Justin Schroeder
Justin Schroeder

Posted on

Introducing AutoAnimate — add motion to your apps with a single line of code.

When it comes to building user interfaces, a little motion goes a long way. Whether you are adding a task to your todo list, deleting a contact, or sorting a playlist, interfaces with subtle motion unquestionably provide a superior user experience. If we know some motion is better — why do we so seldom add it?

Motion can be hard to visualize

The answer is as simple — it just takes too much time. Time is money after all, and optimizing for "minor" UX details often falls outside the budget of all but the biggest brands.

To be fair, adding UI animations can be painful — especially for new, removed, and moved DOM elements. For example, when animating the addition of a new item to a list an experienced dev might do the following:

  • Measure the parent element and set its max-height explicitly, and add a class with css transitions for max-height.
  • Add a class to the new list item before its added to the DOM that sets its initial opacity, and transform state (perhaps a slight scale down).
  • Inject the element, and set a very short timeout that removes the initial class.
  • Calculate the height of the element being added, and increase the parent’s max-height by that amount.
  • Wait for the height to be fully transition, and remove the explicit max-height properties.

This is not fun! Enter AutoAnimate.

AutoAnimation Logo

AutoAnimate is a lightweight (1.9Kb), zero-config, drop-in, animation library that automatically applies transition animations to elements being added, removed, or moved in the DOM. It literally takes one line of code to implement, and it works with React, Vue, and any other JavaScript framework you want.

AutoAnimate’s goal is to substantially improve an application’s user-experience without impacting the developer’s implementation time or performance budget.

Let’s take a look at two identical lists written in React — one with AutoAnimate and one without.

The details of the list are just standard React code, but lets take a look at how animations were added to the second list:

import React from 'react';
import FrameworkList from './FrameworkList';
import { useAutoAnimate } from '@formkit/auto-animate/react';

export default function App() {
  const [animationParent] = useAutoAnimate();
  return (
    <section className="comparison">
      <FrameworkList />
      <FrameworkList ref={animationParent} />
Enter fullscreen mode Exit fullscreen mode

That’s it? Yep. And it might even be easier if you use Vue!

<script setup>
import FrameworkList from './FrameworkList.vue'

  <section class="comparison">
    <FrameworkList />
    <FrameworkList v-auto-animate />
Enter fullscreen mode Exit fullscreen mode

Of course AutoAnimate works great with plain ol' native JavaScript too! All you need to do is pass the parent DOM element into the autoAnimate function:

const el = document.getElementById('#my-el')
Enter fullscreen mode Exit fullscreen mode

AutoAnimate is made by myself (Justin Schroeder) and the team from FormKit, and as of today the beta is publicly available!

Examples & Docs

If you find AutoAnimate is helping you out, consider supporting us. You can:

Top comments (8)

link2twenty profile image
Andrew Bone

I was sceptical of how easy it would be to implement... I stand corrected 😀.

justinschroeder profile image
Justin Schroeder

Haha! Love this ❤️

(also didnt know you could do sandbox embeds in comments on

codingjlu profile image

This is awesome! Definitely looking forward to use it in a future project.

asheeshh profile image

just what I was trying to find ❤, tysm for sharing.

kissu profile image
Konstantin BIFERT

This one looks quite cool, I'll probably give it a try soon. Thanks for your work on FormKit Justin! 🙏🏻

lyrod profile image

It takes me 5min to add it into my React Project! Pretty cool!

stormytalent profile image

Thanks for sharing.
I am really interesting with your blog!

adelpro profile image

Great package , very simple to implement, but i cant find documentation about useAutoAnimate({}) configuration options.
especialy for easing options.
thinks @justinschroeder