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.

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.

auto-animate's Issues

Support for React 17 and 18

Support for at least react 17 would be appreciated

[Feature request] Add a callback option when animation is completed

unpkg support

I've not yet been able to build an example by importing from unpkg – I've tried these:

import autoAnimate from 'https://unpkg.com/@formkit/auto-animate'

import autoAnimate from 'https://unpkg.com/@formkit/[email protected]/index.mjs'

Is there a proper form, or does support just require a bit more work?

List Example - Vanilla JS

Hi,

First of all, thank you for all your work in this library. It is pretty awesome!

I wanted to know if would be possible for you to publish your List example but for Vanilla JS https://github.com/formkit/auto-animate/blob/master/docs/src/examples/list/ActualList.vue

I am trying to understand animate elements transform with auto-animate in vanilla js (a hamburger menu for example)

Thank you in advance for your help.

paulo

Anyway to block auto-animate from appearing on certain child elements?

I have a setup essentially looking like this:

<parent>
          <modal /> 
          <Element /> 
          <modal /> 
          <Element /> 
          <modal /> 
          <Element /> 
          <modal /> 
          <Element /> 
</parent>

The modals are from an external library (Materialize) and right now due to auto-animate the Modal pop-up animation is quite funky as the animations are conflicting, anyway I could disable Auto-animate on the child Modal elements?

Module not found: Error

Having this error at build:

Module not found: Error: Package path ./react is not exported from package /Users/[path_to_project]/node_modules/@formkit/auto-animate (see exports field in /Users/[path_to_project]/node_modules/@formkit/auto-animate/package.json)

• React 17
• Webpack builder Using Laravel Mix
• Typescript 4.7.4
• Library is installed as "@formkit/auto-animate": "^1.0.0-beta.1"

version 1.0.0-beta.1 is not working

version 1.0.0-beta.1 is not working
The official website demo is also not working

Example not working on browser

Your

Website shows many example, but animation not working. It'z just regular interaction without animation. Before & after is looking like the same

Can't use with esbuild

esbuild produces the following error

[error] ✘ [ERROR] Could not resolve "@formkit/auto-animate"
[error]     ../main.js:2:51:
[error]       2 │ ...040formkit$002fauto$002danimate = require("@formkit/auto-animate");
[error]         ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~
[error]   The path "." is not currently exported by package "@formkit/auto-animate":
[error]     ../../../../../node_modules/@formkit/auto-animate/package.json:18:13:
[error]       18 │   "exports": {
[error]          ╵              ^
[error]   None of the conditions provided ("import") match any of the currently active conditions ("browser", "default", "require"):
[error]     ../../../../../node_modules/@formkit/auto-animate/package.json:27:9:
[error]       27 │     ".": {
[error]          ╵          ^
[error]   Consider using an "import" statement to import this file, which will work because the "import" condition is supported by this package:
[error]     ../main.js:2:51:
[error]       2 │ ...040formkit$002fauto$002danimate = require("@formkit/auto-animate");
[error]         ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~
[error]   You can mark the path "@formkit/auto-animate" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

I guess we need to add default property to package.json:

"exports": {
  ".": {
    "import": "./index.mjs",
    "default": "..."
  }
}

No "exports" main defined error when running tests

Hi! Nice package!

I encountered an issue when running the tests. It works perfectly fine in local development but fails when running tests with mocha with the following error. Any help is appreciated on how to get around this.

Mocha version is ^6.2.0 and Typescript is 4.5.

> NODE_PATH=. mocha --exit --timeout 10000 --require ts-node/register --reporter spec $(npm run --silent test-frontend-list)

node: v14.18.0
npm: v6.14.15
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in  .../node_modules/@formkit/auto-animate/package.json
    at new NodeError (internal/errors.js:322:7)
    at throwExportsNotFound (internal/modules/esm/resolve.js:322:9)
    at packageExportsResolve (internal/modules/esm/resolve.js:511:7)
    at resolveExports (internal/modules/cjs/loader.js:450:36)
    at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> ... /frontend/ui/utils/AnimationContainer.tsx:2:1)

Here's the import which is causing the error:

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

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "baseUrl": ".",
    "allowSyntheticDefaultImports": true,
    "noErrorTruncation": true,
    "lib": ["es2015", "es2016.array.include", "dom", "es2018.promise"],
    "allowJs": true,
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "strictPropertyInitialization": false,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

Package path ./react is not exported from package

Hello,
installing this package then importing it in my project throws the following error:
Module not found: Error: Package path ./react is not exported from package C:\Users\Mak\Sites\Tests\erb-4.0.1-qms\node_modules\@formkit\auto-animate (see exports field in C:\Users\Mak\Sites\Tests\erb-4.0.1-qms\node_modules\@formkit\auto-animate\package.json)

How to fix it?
Thank you.

do not need to remove this el when it's deleted?

auto-animate/src/index.ts

Line 576 in 8f9dc86

parents.add(el)

Feature Request: Better FormKit integration

I'd love to see some kind of plugin that could be injected into FormKit so we don't have to manually target the .formkit-outer class to add autoAnimate. For now I've added an AnimatedForm wrapper component which does this automatically.

<template>
  <div ref="target" class="contents">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import autoAnimate from '@formkit/auto-animate'

const target = ref()

onMounted(() => {
  target.value.querySelectorAll('.formkit-outer').forEach(autoAnimate)
})
</script>

Feasible to clean up removed DOM elements for re-insertion?

Current behaviour appears to presume removed elements will be discarded.

The animation is broken when I re-append a previously removed element. I’m guessing because it is being inserted with the style properties AutoAnimate left on it when it was removed?

A simple demonstration:
https://gregarious-maroon-iguanacolossus.glitch.me

Glitch source:
https://glitch.com/edit/#!/gregarious-maroon-iguanacolossus

Is it feasible to remove the applied “exit styles” once the animation is complete (upon removal from the DOM)? This would enable animations in scenarios such as this where interaction is applied as a progressive enhancement.

One work around I am considering is creating a disposable wrapper element that is recreated upon remove/insert.

Registering auto-animate in nuxt 3

how do I register the auto-animate library in nuxt 3

this is what I have in my formkit.config.ts, but it is not working.

import { en } from '@formkit/i18n'
import { DefaultConfigOptions } from '@formkit/vue'
import { createAutoAnimatePlugin } from '@formkit/addons'
import '@formkit/themes/windicss'

const config: DefaultConfigOptions = {
  locales: { en },
  locale: 'en',
  plugins: [
    createAutoAnimatePlugin()
  ]
}

export default config

I get this error

Module not found in jest tests

Hi,
I'm using auto-animate on a typescript React app and I'm testing it with Jest. When I'm running the app, everything is fine. But when I'm running the tests, I get this error:

Cannot find module '@formkit/auto-animate/react' from 'src/.../a_path_to_my_component'

Complete error:

I don't understand why Jest can't find the module... I'm using node v16.15.0, npm v8.5.5 and react-scripts v5.

Here is my package.json :

Click to see

{
  "name": "suivie",
  "homepage": "https://clm-roig.github.io/suivie",
  "version": "0.2.4",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@formkit/auto-animate": "^1.0.0-beta.1",
    "@mui/icons-material": "^5.8.2",
    "@mui/lab": "^5.0.0-alpha.84",
    "@mui/material": "^5.8.2",
    "@mui/x-date-pickers": "^5.0.0-alpha.4",
    "@reduxjs/toolkit": "^1.8.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^14.2.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^17.0.36",
    "@types/react": "^18.0.1",
    "@types/uuid": "^8.3.4",
    "date-fns": "^2.28.0",
    "notistack": "^2.0.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.31.3",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "recharts": "^2.1.10",
    "redux-persist": "^6.0.0",
    "typescript": "~4.7.2",
    "uuid": "^8.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "coverage": "react-scripts test --coverage --watchAll",
    "eject": "react-scripts eject",
    "release": "standard-version",
    "lint": "eslint \"**/*.{js,ts,tsx}\"",
    "lint:fix": "eslint --fix \"**/*.{js,ts,tsx}\"",
    "format": "prettier --write \"**/*.{js,ts,tsx,css,json}\" --config ./.prettierrc"
  },
  "eslintConfig": {},
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@commitlint/cli": "^17.0.1",
    "@commitlint/config-conventional": "^17.0.2",
    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.27.0",
    "eslint": "^8.16.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
    "husky": "^8.0.1",
    "jest-watch-typeahead": "^1.1.0",
    "prettier": "^2.6.2",
    "standard-version": "^9.5.0"
  }
}

My TS config :

Click to see

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

I understand that maybe this is not related to this library in particular: feel free to tell me to ask this question elsewhere.

Thank you for this module, it's awesome!

Peer dependency error while installing

Trying to test this, but getting the following error:

npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peerOptional react@"^16.8.0" from @formkit/[email protected]
npm ERR!   node_modules/@formkit/auto-animate
npm ERR!     @formkit/auto-animate@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I'm running Node v18.2.0 and React v18.1.0

react-native-web support (react-dom)

Hey everybody! What an amazing library! 🤩

Since auto-animate easily works with react / react-dom and react-native-web is just a layer on top (also using react-dom)
I was wondering auto-animate it should not work out of the box for react-native-web.

Sadly, it doesn't it seems.

Does anybody have a hint on how to get it to work or what would be the missing piece?

Just to clarify: I'm not talking about React Native for ios/android since I have react-native-reanimated for that.
I'm talking about react-native-web which is just an abstraction layer for react/react-dom.

Thanks for any input on that!

React Native support

Can we have support for react native.

Staggered Animations?

Great library, thank you for this!

I'm wondering if there's also a config option to apply delays between animations starts for a staggered transition.
Use case: Loading a list to animate in one item after another instead of all at once.

Also, if there are click animation events on the list items (via svelte animate), hopefully these "animate in/out" delay shouldn't be applied on an item the user clicks on.

isMounted method is incompatible with Shadow DOM

Description

The method for calculating isMounted doesn't seem to work in shadow DOM, because document.contains() will return false for anything inside of shadow DOM. Consider using Node.isConnected.

Reproduction

link to the svelte example written in Lit

steps:

• add or remove a chip
• observe that the sibling elements after do not animate but flash into position

debugging steps:

• open dev tools
• find console log of autoAnimate
• click on function to open source
• add debugger to the mutation sibling lines
• add a child
• observe mutation previous sibling

Not working in next.js

I tried with next 10, react 16.8, node 16.13 and it gives me the following error

./node_modules/@formkit/auto-animate/react/index.mjs
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)

Package subpath './vue' is not defined by "exports"

When I build my application using vite-ssg，

import { autoAnimatePlugin } from '@formkit/auto-animate/vue'

export const createApp = ViteSSG(
  App,
  { routes, scrollBehavior },
  ({ app, router, isClient }) => {
    app.use(autoAnimatePlugin)
    dayjs.extend(LocalizedFormat)
    if (isClient) {
      router.beforeEach(() => { NProgress.start() })
      router.afterEach(() => { NProgress.done() })
    }
  },
)

vite build

Package subpath './vue' is not defined by "exports" in /Users/oyxiaoxi/Desktop/Projects/Vue/oyxiaoxi.me/node_modules/@formkit/auto-animate/package.json

When removing last item, it disappears before it's animated away

Repro:

• Vanilla JS
• React
• Vue, not a problem for some reason! 😲 No idea why, I'm not very familiar with Vue

Adding an else branch here might fix the issue: https://github.com/formkit/auto-animate/blob/1.0.0-beta.1/src/index.ts#L451-L455

 if (next && next.parentNode && next.parentNode instanceof Element) {
   next.parentNode.insertBefore(el, next)
 } else if (prev && prev.parentNode) {
   prev.parentNode.appendChild(el)
+} else {
+  el[TGT].appendChild(el)
 }

• Vanilla JS
• React

But I don't know if the change would break something else. 😄

check if element is being animated

I have a list in which the items can be dragged around with the mouse. The problem is that I don't want my drag and drop events to fire when elements are in the middle of an animation.

Is there a way to check if an element is being currently animated? I'm using React if that helps.

Vite React app v18 support

I am using the latest Vite React App with TS and for styling, I am using Tailwind CSS. Do you support the latest React app v18 or am I forced to roll back? When I tried to install this animation library I got the error below:
>npm install @formkit/auto-animate npm WARN config global --global, --localare deprecated. Use--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @formkit/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^16 || ^17 || ^18" from @headlessui/[email protected]
npm ERR! node_modules/@headlessui/react
npm ERR! @headlessui/react@"^1.6.6" from the root project
npm ERR! peer react@"^18.2.0" from [email protected]
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@"^16 || ^17 || ^18" from @headlessui/[email protected]
npm ERR! node_modules/@headlessui/react
npm ERR! @headlessui/react@"^1.6.6" from the root project
npm ERR! peer react-dom@"^16.0.0 || ^17.0.0 || ^18.0.0" from [email protected]
npm ERR! node_modules/react-resize-detector
npm ERR! react-resize-detector@"^7.1.2" from [email protected]
npm ERR! node_modules/recharts
npm ERR! recharts@"^2.1.13" from the root project
npm ERR! 5 more (react-router-dom, react-smooth, ...)
npm ERR! 11 more (react-helmet, react-icons, react-resize-detector, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@"^16.8.0" from @formkit/[email protected]
npm ERR! node_modules/@formkit/auto-animate
npm ERR! @formkit/auto-animate@"" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR! peerOptional react@"^16.8.0" from @formkit/[email protected]
npm ERR! node_modules/@formkit/auto-animate
npm ERR! @formkit/auto-animate@"" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Local\npm-cache_logs\2022-08-04T09_52_11_683Z-debug-0.log`

[Error]: Resolve error: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]

hi, when i use autoAnimatePlugin and register it in my vue app main.ts, seems like there are some error occur in terminal when i execute eslint --ext

my main.ts

import { createApp } from 'vue'
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
import App from './App.vue'

const app = createApp(App)
app.use(autoAnimatePlugin)
app.mount('#app')

and then i met the error

/app/main.ts
  1:1   error  Resolve error: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './vue' is not defined by "exports" in /Users/buxiongyu/Desktop/zeus/node_modules/@formkit/auto-animate/package.json
    at new NodeError (node:internal/errors:377:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:664:7)
    at resolveExports (node:internal/modules/cjs/loader:483:36)
    at Module._findPath (node:internal/modules/cjs/loader:523:31)
    at findModulePath (/Users/buxiongyu/Desktop/zeus/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-import-resolver-alias/index.js:99:27)
    at exports.resolve (/Users/buxiongyu/Desktop/zeus/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-import-resolver-alias/index.js:75:10)
    at v2 (/Users/buxiongyu/Desktop/zeus/node_modules/.pnpm/[email protected]/node_modules/eslint-module-utils/resolve.js:116:23)
    at withResolver (/Users/buxiongyu/Desktop/zeus/node_modules/.pnpm/[email protected]/node_modules/eslint-module-utils/resolve.js:121:14)
    at fullResolve (/Users/buxiongyu/Desktop/zeus/node_modules/.pnpm/[email protected]/node_modules/eslint-module-utils/resolve.js:138:22)  import/extensions
  1:1   error  Resolve error: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './vue' is not defined by "exports" in /Users/buxiongyu/Desktop/zeus/node_modules/@formkit/auto-animate/package.json

5:35  error  Missing file extension for "@formkit/auto-animate/vue"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           import/extensions

5:35  error  Unable to resolve path to module '@formkit/auto-animate/vue'   

maybe is lint error , but i am not sure, hope can resolve this problem

here is my project config:

• vite 2.9.0
• node v18.2.0
• eslint 8.0.0

`overflow: auto` displays scrollbars during animation

windows chrome 102.0.5005.63

https://codesandbox.io/s/naughty-butterfly-ze3mcu?file=/src/App.js

When overflow is auto, the scroll bar will flicker during animation
Subsequent animation flickers after scrolling scrollbar manually

[Vue warn]: Failed to resolve directive: auto-animate

Yes, as in the title. I added auto-animate to the clean nuxt 3 RC v4 project. Everything seems to be working fine, however, I get this warning on the console.

[Vue warn]: Failed to resolve directive: auto-animate

plugins/auto-animate.client.js

import { autoAnimatePlugin } from '@formkit/auto-animate/vue'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(autoAnimatePlugin)
})

pages/index.vue

<script setup>
import { ref } from 'vue'
const items = ref([1, 2, 3])

function removeItem(toRemove) {
    items.value = items.value.filter((item) => item !== toRemove)
}

function addItem() {
    items.value.push(items.value.length + 1)
}
</script>

<template>
    <div>
        <button @click="addItem()"> Add</button>

        <ClientOnly>
            <ul v-auto-animate>
                <li v-for="item in items" :key="item" @click="removeItem(item)">
                    {{ item }}
                </li>
            </ul>
        </ClientOnly>
    </div>
</template>

Issues with webpack, mjs, exports

Unfortunately I'm stuck working on this Ember app, and under the surface of it's CLI, it's using Webpack 5. I'm attempting to use the Native JS implementation of AutoAnimate, and running into issues. Importing via import autoAnimate from '@formkit/auto-animate'; will throw an error:

Module not found: Error: Package path . is not exported from package node_modules/@formkit/auto-animate (see exports field in node_modules/@formkit/auto-animate/package.json)

Clearly it is. After some research, I think it's an issue with the .mjs extension. I know there's been some other issues reported regarding exports as well.

I personally kind of consider webpack a bit legacy at this point, so if this something that will remain untackled, how is the Native JS implementation supposed to work, given that the docs reference import autoAnimate from './js/autoAnimate.js', and there's no built .js file in the npm module?

Feature Request: Hidden Elements

Is it possible that add/remove not only reacts if the element is actually added/removed from the DOM, but also when the hidden state changes?

If you guide me in the right direction, I also would be happy to contribute 🙂

Wrong import on Vue

It was a simple fix for me. The file @formkit\auto-animate\vue\index.mjs has an import for ../index. I had to specify that it was importing ../index.mjs

Document example with Nuxt

From the [nuxt vue plugins documentation](https://nuxtjs.org/docs/directory-structure/plugins/#vue-plugins it would seem all I need to do to get auto-animate to work is the following:

❯ npx nuxi init site
❯ yarn add @formkit/auto-animate
❯ yarn install
❯ yarn nuxi add plugin autoanimate 

plugins/autoanimate.ts:

import Vue from 'vue'
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
Vue.use(autoAnimatePlugin)

nuxt.config.ts:

...
  plugins: ['~/plugins/autoanimate.ts']
...

But this doesn't seem to work, could you add an example to the documentation of how auto-animate works with nuxt?

Vue dropdown example not working?

I rewrote 1:1 the usage example to create a dropdown and I get an error Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Example:

<script setup>
import { ref, onMounted } from "vue"
import autoAnimate from "@formkit/auto-animate"

const dropdown = ref() // we need a DOM node
const show = ref(false)

onMounted(() => {
  autoAnimate(dropdown.value) // thats it!
})
</script>

<template>
  <div ref="dropdown" class="dropdown">
    <strong class="dropdown-label" @click="show = !show"
      >Click me to open!</strong
    >
    <p class="dropdown-content" v-if="show">Lorum ipsum...</p>
  </div>
</template>

Code:
https://codesandbox.io/s/broken-tree-e5o9ep?file=/src/App.vue

docs: Svelte quickstart example

First: thx for this great library !

As a new user, I tried integrating autoanimate with the svelte example on the main page, yet no animation was played. Then I remembered that svelte requires a key to keep track of changes.

It would be great if the example provided would have a key defined as well:

    {#each tags as tag (tag)}

Current latest version isnt what documentation says it is for the hook

I get the type:

import { AutoAnimateOptions, AutoAnimationPlugin } from "../index";
/**
 * AutoAnimate hook for adding dead-simple transitions and animations to react.
 * @param options - Auto animate options or a plugin
 * @returns
 */
export declare function useAutoAnimate(options: Partial<AutoAnimateOptions> | AutoAnimationPlugin): import("react").RefObject<Element>;

Which is not what your documentation page says it will be.

In addition, this can't be set directly on a ref so it requires making a ref and then writing logic. For example assigning it to a div doesnt work because its not assignable to HTMLElement - perhaps that is what the missing version fixes

I see the latest main implements the changes so likely just not published yet - but seeing that it is trending atm should prob have it work like docs say ;-)

P.S: Awesome lib! I am currently using it to see if it would work for my specific use case and it took 5 seconds literally other than realizing i was getting

const parent = useAutoAnimate({}); // options is not optional

and i had to cast to make it accept it :-)

<TagsContainer ref={parent as unknown as RefObject<HTMLDivElement>}>

Vue Plugin Import is Incorrect in Documentation

In the current documentation to use the Vue plugin it shows using a default export import autoAnimatePlugin from '@formkit/auto-animate/vue' but the actual export is a named export import { autoAnimatePlugin } from '@formkit/auto-animate/vue'

Angular Docs

Can this lib work in Angular?
Maybe i will add a Pull Request for Docs for Angular or a Wrapper what do you think?

React hook fails to compile

In a CRA running React 17 attempting to use the react hook import { useAutoAnimate } from '@formkit/auto-animate/react' results in the following error:

Failed to compile.

./node_modules/@formkit/auto-animate/react/index.mjs
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)

Not using the hook, and just using the autoAnimate function in a useEffect does however work

Applying AutoAnimate to table rows destroys row display format

Straightforward and easy to use library so far.

I was however testing out animations on tables, sorting (rows moving) and removing filters (adding rows) work great.
But removing rows, collapses the style of them and make them weirdly float outside the table. Also the sizing of the parent during the animation looks off.

Example in this sandbox: https://codesandbox.io/s/upbeat-kapitsa-hx0mvd?file=/src/App.js

Any advice on how to handle this? (without styling plain divs to look like a table)

Wrong import in Svelte's example tab

In home page, Svelte's example tab in hero is showing an import from Vue package.

Current import is import autoAnimate from "@formkit/vue"

Expected import should be import autoAnimate from '@formkit/auto-animate';

See screenshot:

Option to disable animation

Great work for this awesome library!

Would be nice to have an option to disable animation programmatically, for example when doing drag'n'drop.

Crude example with react-beautiful-dnd:

const [autoAnimateEnabled, setAutoAnimateEnabled] = useState(true);
const [autoAnimateRef] = useAutoAnimate({
  enabled: autoAnimateEnabled,
});

return (
  <DragDropContext 
    onDragStart={() => setAutoAnimateEnabled(false)} 
    onDragEnd={() => setAutoAnimateEnabled(true)}
  >
    <Droppable droppableId="droppable">
      {(provided) => (
        <ul {...provided.droppableProps} ref={mergeRefs([provided.innerRef, autoAnimateRef])}>

I guess with the Vue directive it should look like this : <ul v-auto-animate="{ enabled: autoAnimateEnabled }">.

Enable (some) animations even if the user prefers reduced motion

Currently all animations are disabled if the user prefers reduced motion: https://github.com/formkit/auto-animate/blob/1.0.0-beta.1/src/index.ts#L563-L564

const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
if (mediaQuery.matches) return

However, "No motion isn't always prefers-reduced-motion." Disabling all animations can actually be bad for accessibility. Check the "Reduced motion vs. nuked motion" section for a good example.

Two ideas:

1. Adjust the animations/transitions to be less distracting when the user prefers reduced motion.
2. Enable all animations by default, and allow disabling individual animations by setting an option like disableIfUserPrefersReducedMotion (what a mouthful) to true.

If the 1st one is implemented, not sure if there's a need for the 2nd one.

Support for `v-auto-animate` in Vue2

Hi, I'm using Vue 2. Is there a way to get v-auto-animate working?

If relevant, I'm using the composition API plugin for vue2.

Bug for leave animations after page change on Nuxt 3

Hello,

First thing: Thank you for this awesome library, v-auto-animate is really a pleasure to use !

I encountered a bug that I dont succeed to resolve, so I created a minimal reproduction for everyone to see :
https://stackblitz.com/edit/github-vjhzhq?file=pages/test.vue

If you first go on the page /test and change the categories in the select tag, all animations are perfect.

But when you change page ("Go to homepage") and come back to the test page ("Back to test page") then all the animations for making the elements disappear are bugging, they don't act at all like before and even create a scroll bar etc...

I just identify that the top css property was different from the good to the bad animation, because on the good one the value stays at 0, but on the bad one it changes.

Library does not work with containers that are not initially rendered within a component (React)

Hey there! Great job with this library, it's such a quick and easy way to improve UX. I encountered an issue where the animations do not work when a container is not initially rendered in the DOM. I created a small codesandbox to demonstrate this here:

Notice parent2 animates as expected, however its children do not. If you change the initial state of showParent2 to true, everything will animate correctly (until parent2 isn't being rendered anymore). An obvious workaround to this issue is to compose your app in a way such that each individual ref is always rendered within each component.

Feature request: animate when a child is displayed: none in the DOM.

It will be awesome to be able to animate when toggling display property to display: none; instead of only

[Vue warn]: A plugin must either be a function or an object with an "install" function.

Environment

---

• Operating System: Darwin
• Node Version: v16.15.1
• Nuxt Version: 3.0.0-rc.4
• Package Manager: [email protected]
• Builder: vite
• User Config: css, tailwindcss, modules, colorMode, pwa, buildModules, storyblok, build
• Runtime Modules: @kevinmarrec/[email protected], @nuxtjs/[email protected]
• Build Modules: @nuxtjs/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], @storyblok/[email protected]

---

Reproduction

https://github.com/jamaluddinrumi/lemahabang.v3

Problems

I import @formkit/auto-animate through plugin as below

/plugins/autoAnimate.js

import { autoAnimate } from "@formkit/auto-animate";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(autoAnimate);
});

i got warn

i also tried to include @formkit/auto-animate in build.transpile but it's still the same

/nuxt.config.ts

...
build: {
    transpile: [
      "swiper",
      "@headlessui/vue",
      "@heroicons/vue",
      "@formkit/auto-animate",
      "@fortawesome/vue-fontawesome",
      "@fortawesome/fontawesome-svg-core",
      "@fortawesome/free-solid-svg-icons",
      "@fortawesome/free-brands-svg-icons",
    ],
...

Is possible work with v-show?

Working perfect with v-if. But v-if is re-rendering components. So it can be not user friendly in some places. For example if accordion got forms and if user filled some forms then, if user toggle accordion, some forms will be empty because of v-if. So v-show is more useful in this case. In your example: https://github.com/formkit/auto-animate/blob/master/docs/src/examples/accordion/ActualAccordion.vue

Is that possible to use auto-animate with v-show directive?

ERR_PACKAGE_PATH_NOT_EXPORTED error with vite.

Fresh install, 1.0.0-beta.1

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './react' is not defined by "exports" in /Users/blah/Code/Projects/piccolo/piccolo-web/node_modules/@formkit/auto-animate/package.json
@piccolohealth/web-server:     at new NodeError (internal/errors.js:322:7)
@piccolohealth/web-server:     at throwExportsNotFound (internal/modules/esm/resolve.js:332:9)
@piccolohealth/web-server:     at packageExportsResolve (internal/modules/esm/resolve.js:523:7)
@piccolohealth/web-server:     at resolveExports (internal/modules/cjs/loader.js:450:36)
@piccolohealth/web-server:     at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
@piccolohealth/web-server:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
@piccolohealth/web-server:     at Function.Module._resolveFilename (/Users/dbousamra/Code/Projects/piccolo/piccolo-web/node_modules/tsconfig-paths/lib/register.js:75:40)
@piccolohealth/web-server:     at Function.Module._load (internal/modules/cjs/loader.js:746:27)
@piccolohealth/web-server:     at Module.require (internal/modules/cjs/loader.js:974:19)
@piccolohealth/web-server:     at require (internal/modules/cjs/helpers.js:101:18)
@piccolohealth/web-server:     at Object.<anonymous> (/Users/dbousamra/Code/Projects/piccolo/piccolo-web/packages/client/src/hooks/useAnimate.ts:2:1)
@piccolohealth/web-server:     at Module._compile (internal/modules/cjs/loader.js:1085:14)
@piccolohealth/web-server:     at Module._compile (/Users/dbousamra/Code/Projects/piccolo/piccolo-web/node_modules/source-map-support/source-map-support.js:547:25)
@piccolohealth/web-server:     at Module.m._compile (/private/var/folders/vb/cgx9vs8x6tv9154qvqqcqgnw0000gp/T/ts-node-dev-hook-5126279500872808.js:69:33)
@piccolohealth/web-server:     at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
@piccolohealth/web-server:     at require.extensions.<computed> (/private/var/folders/vb/cgx9vs8x6tv9154qvqqcqgnw0000gp/T/ts-node-dev-hook-5126279500872808.js:71:20)
@piccolohealth/web-server:     at Object.nodeDevHook [as .ts] (/Users/dbousamra/Code/Projects/piccolo/piccolo-web/node_modules/ts-node-dev/lib/hook.js:63:13)
@piccolohealth/web-server:     at Module.load (internal/modules/cjs/loader.js:950:32)
@piccolohealth/web-server:     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
@piccolohealth/web-server:     at Module.require (internal/modules/cjs/loader.js:974:19)
@piccolohealth/web-server:     at require (internal/modules/cjs/helpers.js:101:18)
@piccolohealth/web-server:     at Object.<anonymous> (/Users/dbousamra/Code/Projects/piccolo/piccolo-web/packages/client/src/components/templates/statements/manager/SortableStatementTemplates.tsx:17:1)
@piccolohealth/web-server: [ERROR] 19:19:41 Error: Package subpath './react' is not defined by "exports" in /Users/dbousamra/Code/Projects/piccolo/piccolo-web/node_modules/@formkit/auto-animate/package.json