@formkit/auto-animate

What is @formkit/auto-animate?

@formkit/auto-animate is an npm package that provides simple and efficient animations for DOM elements. It is designed to be easy to use and integrate into existing projects, allowing developers to add animations to their web applications with minimal effort.

What are @formkit/auto-animate's main functionalities?

Automatic Animations

This feature allows you to automatically animate changes to a container element. When elements are added, removed, or reordered within the container, the changes are animated smoothly.

import autoAnimate from '@formkit/auto-animate';

const container = document.querySelector('#container');
autoAnimate(container);

Custom Animation Durations

You can customize the duration of the animations by passing an options object with a duration property. This allows you to control how long the animations take to complete.

import autoAnimate from '@formkit/auto-animate';

const container = document.querySelector('#container');
autoAnimate(container, { duration: 500 });

Easing Functions

This feature allows you to specify an easing function for the animations. Easing functions control the acceleration and deceleration of the animations, providing a more natural look and feel.

import autoAnimate from '@formkit/auto-animate';

const container = document.querySelector('#container');
autoAnimate(container, { easing: 'ease-in-out' });

Other packages similar to @formkit/auto-animate

animejs

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports various types of animations including CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to @formkit/auto-animate, Anime.js offers more control and customization options for complex animations.

framer-motion

Framer Motion is a popular animation library for React. It provides a declarative API for creating animations and gestures. While @formkit/auto-animate focuses on automatic animations for DOM changes, Framer Motion offers more advanced features for creating interactive animations and is specifically designed for React applications.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript library for creating high-performance animations. It is widely used in the industry for its flexibility and power. GSAP can animate anything JavaScript can touch (CSS, SVG, canvas, etc.). Compared to @formkit/auto-animate, GSAP is more suitable for complex and highly customized animations.

README

Add motion to your apps with a single line of code.

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, Solid or any other JavaScript application.

With one line of code, you can improve your interfaces, for example:

Installation

Install using your package manager of choice.

# yarn
yarn add @formkit/auto-animate
# npm
npm install @formkit/auto-animate
# pnpm
pnpm add @formkit/auto-animate

Boom! Done. That was fast! 🐇

Usage

📖 View the documentation site for usage instructions.

Examples

📖 View the documentation site for examples.

Plugins

📖 View the documentation site for plugin instructions.

Support us

Is AutoAnimate saving you time?

Please consider supporting us with a recurring or one-time donation! 🙏

Contributing

Thank you for your willingness to contribute to this free and open source project! When contributing, consider first discussing your desired change with the core team via GitHub issues, Discord, or other method.