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.
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing formkit/auto-animate in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
Preview
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.
<a href="https://auto-animate.formkit.com"><img width="180" height="42" src="https://cdn.formk.it/web-assets/read-docs-auto-animate-v2.svg" alt="Examples & Docs"></a>
With one line of code, you can improve your interfaces, for example:
<a href="https://auto-animate.formkit.com"> <img src="https://cdn.formk.it/web-assets/motion.gif" alt="Simple example of AutoAnimation motion"> </a>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 <a href="https://github.com/formkit/auto-animate/issues">GitHub issues</a>, <a href="https://discord.gg/SHYT8pyeNm">Discord</a>, or other method.