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} />
    </section>
  );
}
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'
</script>

<template>
  <section class="comparison">
    <FrameworkList />
    <FrameworkList v-auto-animate />
  </section>
</template>
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')
autoAnimate(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:

Discussion (7)

Collapse
link2twenty profile image
Andrew Bone

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

Collapse
justinschroeder profile image
Justin Schroeder Author

Haha! Love this ❤️

(also didnt know you could do sandbox embeds in comments on dev.to)

Collapse
codingjlu profile image
codingjlu

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

Collapse
lyrod profile image
Lyrod

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

Collapse
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! 🙏🏻

Collapse
asheeshh profile image
ashish

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

Collapse
stormytalent profile image
StormyTalent

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