MCPcopy
hub / github.com/formkit/auto-animate

github.com/formkit/auto-animate @0.9.0 sqlite

repository ↗ · DeepWiki ↗ · release 0.9.0 ↗
85 symbols 231 edges 52 files 25 documented · 29%
README

AutoAnimate Logo

Latest Build GitHub Sponsors

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.

Examples & Docs

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

Simple example of AutoAnimation motion

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.

Extension points exported contracts — how you extend this code

Coordinates (Interface)
* Absolute coordinate positions adjusted for scroll.
src/index.ts
Directives (Interface)
(no doc)
src/solid/index.ts
Window (Interface)
(no doc)
docs/src/global.d.ts
AnimationController (Interface)
(no doc)
src/index.ts
AutoAnimateOptions (Interface)
(no doc)
src/index.ts
AutoAnimationPluginOptions (Interface)
(no doc)
src/index.ts
AutoAnimationPlugin (Interface)
(no doc)
src/index.ts

Core symbols most depended-on inside this repo

assertNoConsoleErrors
called by 17
tests/e2e/utils.ts
withAnimationObserver
called by 14
tests/e2e/utils.ts
autoAnimate
called by 11
src/index.ts
raw
called by 10
src/index.ts
u
called by 7
docs/assets/prism.js
getCoords
called by 6
src/index.ts
l
called by 6
docs/assets/prism.js
isPlugin
called by 5
src/index.ts

Shape

Function 75
Interface 7
Class 2
Method 1

Languages

TypeScript100%

Modules by API surface

src/index.ts34 symbols
docs/assets/prism.js9 symbols
tests/e2e/utils.ts6 symbols
src/vue/index.ts6 symbols
src/solid/index.ts4 symbols
tests/e2e/visual-video.util.ts3 symbols
src/angular/index.ts3 symbols
src/preact/index.ts2 symbols
src/debug-utils.ts2 symbols
docs/src/examples/dropdown/dropdown.jsx2 symbols
docs/src/examples/dropdown/dropdown-solid.tsx2 symbols
docs/src/examples/disable/disable.jsx2 symbols

Dependencies from manifests, versioned

@angular/core17.1.0 · 1×
@formkit/vue1.6.5 · 1×
@nuxt/kit3.12.4 · 1×
@nuxt/module-builder0.8.3 · 1×
@nuxt/schema3.12.4 · 1×
@playwright/test1.47.2 · 1×
@rollup/plugin-terser0.4.4 · 1×
@rollup/plugin-typescript11.1.6 · 1×
@types/node20.14.15 · 1×
@types/prismjs1.26.4 · 1×
@types/prompts2.4.9 · 1×
@types/react19.0.0 · 1×

For agents

$ claude mcp add auto-animate \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact