https://github.com/formkit/auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://github.com/formkit/auto-animate

animation javascript react ui vue

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/formkit/auto-animate
• Owner: formkit
• License: mit
• Created: 2022-05-11T18:50:01.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-04-10T16:20:51.000Z (2 months ago)
• Last Synced: 2024-05-01T09:41:09.574Z (about 2 months ago)
• Topics: animation, javascript, react, ui, vue
• Language: TypeScript
• Homepage: https://auto-animate.formkit.com
• Size: 10.1 MB
• Stars: 11,642
• Watchers: 20
• Forks: 201
• Open Issues: 48
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Lists

• awesome-react - auto-animate - A zero-config, drop-in animation utility that adds smooth transitions (**Awesome React** [](https://github.com/sindresorhus/awesome) / React)
• awesome - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-stars - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• jimsghstars - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-vue - @formkit/auto-animate
• awesome-vue - @formkit/auto-animate
• awesome - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-list - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-stars - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-stars - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-stars - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-stars - auto-animate - config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. | formkit | 6036 | (TypeScript)
• awesome-stars - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-stars - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (vue)
• awesome-stars - auto-animate - config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. | formkit | 11869 | (TypeScript)
• awesome-stars - formkit/auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. (TypeScript)
• awesome-stars - auto-animate - config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. | formkit | 11827 | (TypeScript)

README

        


![Latest Build](https://github.com/formkit/auto-animate/actions/workflows/main.yml/badge.svg) ![GitHub Sponsors](https://img.shields.io/github/sponsors/formkit) ![Package Size](https://img.badgesize.io/https:/unpkg.com/@formkit/auto-animate@latest/index.min.js.svg?label=brotli&compression=brotli)

# 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.

```bash

# 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](https://auto-animate.formkit.com#usage).

## Examples

📖 [View the documentation site for examples](https://auto-animate.formkit.com#examples).

## Plugins

📖 [View the documentation site for plugin instructions](https://auto-animate.formkit.com#plugins).

## Support us

Is AutoAnimate saving you time?

Please consider [supporting us with a recurring or one-time donation](https://github.com/sponsors/formkit)! 🙏

## 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.