Release/0.9.0 (#226)

* test(e2e): add Playwright visual tests (video + pixel diffs); stabilize animation waits; upload videos in CI

* fix: jumping when aligned at bottom (#69) (#211)

* fix: jumping when aligned at bottom (#69)

* chore: use const instead of let

* test(e2e): add Playwright visual tests (video + pixel diffs); stabilize animation waits; upload videos in CI

---------

Co-authored-by: Justin Schroeder <[email protected]>

* fix: #69 — nice

* Adding bun to installation instructions (#205)

* feat: allow useAutoAnimate with Vue component ref (#186)

This adds support for using `useAutoAnimate` with a component as the parent.  

When you add `ref="parent"` to a component, the element is found at `parent.value.$el`.  This update checks for component elements or a plain HTML element ref.

* feat: adds component support to useAutoAnimate for Vue

* Investigate and resolve auto-animate issues (#225)

* Improve offscreen handling, Vue integration, and cleanup in AutoAnimate

Co-authored-by: justin <[email protected]>

* Add e2e tests for various autoAnimate scenarios and behaviors

Co-authored-by: justin <[email protected]>

* chore: remove playwright report

* Angular 17.1+ support (#206)

* Angular >v17.1 support

* angular example rewrite

* Angular docs change

* Update package.json

* angular pnpm-lock & usage import fix

* ' -> " typo fix

---------

Co-authored-by: Gergely Dremak <[email protected]>
Co-authored-by: Justin Schroeder <[email protected]>

* chore: lockfile bump

* fix: bottom anchored animations

* chore: remove local claude

* fix: restore bottom-aligned animation fix from PR #211 and fix CI test failures

- Restored deltaBottom/deltaRight checks to detect anchored elements
- Fixed immediate position updates after animations (debounce=false)
- Restored proper parent coordinate calculations in deletePosition
- Added named export for autoAnimate to fix exports test
- Fixed flaky framework animation tests by ensuring elements are visible
- Added scrollIntoViewIfNeeded and increased wait times for CI reliability

All bottom-jump-fix tests now pass across all browsers

* fix: add build step to CI and make tests more robust for slow environments

- Added 'pnpm build' step to GitHub Actions workflow before running tests
- Fixed exports test by ensuring dist files are built in CI
- Made framework animation tests more robust with polling approach
- Added browser-specific timeouts for WebKit compatibility
- Increased wait times and retry attempts for slow CI environments

* fix: no nuxt build on ci

* chore: gh caching

---------

Co-authored-by: Maik Kowol <[email protected]>
Co-authored-by: Abi <[email protected]>
Co-authored-by: Marshall Thompson <[email protected]>
Co-authored-by: Gergely Dremák <[email protected]>
Co-authored-by: Gergely Dremak <[email protected]>

Author: 6 people

.claude/settings.local.json

@@ -16,18 +16,58 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         # version is read from package.json#packageManager
+      
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
+      
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+      
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      
+      - name: Get Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq -r '.[0].devDependencies."@playwright/test".version')" >> $GITHUB_OUTPUT
+      
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+      
       - name: Install dependencies
         run: pnpm install --frozen-lockfile=false
+      
       - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: pnpm exec playwright install --with-deps
+      
+      - name: Install Playwright dependencies only
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+      
+      - name: Build project
+        run: NO_NUXT=1 pnpm build
+      
       - name: Run Playwright tests
         run: pnpm test:e2e
       - name: Upload Playwright report
@@ -36,3 +76,9 @@ jobs:
         with:
           name: playwright-report
           path: playwright-report
+      - name: Upload Playwright videos (visual)
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-videos
+          path: test-results/**/video.webm

.github/workflows/main.yml

@@ -5,12 +5,9 @@ dist
 
 # Playwright artifacts
 playwright-report/
+playwright-report/index.html
 test-results/
 
-# Cypress artifacts (legacy)
-cypress/videos/
-cypress/screenshots/
-
 dist
 .DS_Store
 node_modules
@@ -22,3 +19,4 @@ temp
 .yalc
 .idea
 .nuxt
+*.local.json

.gitignore

@@ -287,7 +287,10 @@ async function main() {
   // await qwikBuild()
   await declarationsBuild()
   await bundleDeclarations()
-  await nuxtBuild()
+  // Skip nuxt module build in CI or when NO_NUXT is set
+  if (!process.env.NO_NUXT) {
+    await nuxtBuild()
+  }
   await addPackageJSON()
   await addAssets()
   await outputSize()

build/bundle.ts

@@ -12,6 +12,7 @@ import IconJavaScript from "./IconJavaScript.vue"
 import IconSvelte from "./IconSvelte.vue"
 import IconAngular from "./IconAngular.vue"
 import IconNuxt from "./IconNuxt.vue"
+import IconBun from "./IconBun.vue"
 import { computed, ref } from "vue"
 import { vAutoAnimate } from "../../../src"
 import "../../assets/prism.css"
@@ -30,6 +31,7 @@ type LanguageOption =
   | "npm"
   | "pnpm"
   | "nuxt"
+  | "bun"
 
 type Language = {
   ext: "jsx" | "vue" | "html"
@@ -194,6 +196,13 @@ function copyCode(value: string) {
         >
           <IconPNPM />pnpm
         </li>
+        <li
+          v-if="'bun' in props.examples"
+          @click="current = 'bun'"
+          :data-selected="current === 'bun' || null"
+        >
+          <IconBun />bun
+        </li>
         <li
           v-if="'nuxt' in props.examples"
           @click="current = 'nuxt'"

docs/src/components/CodeExample.vue

@@ -0,0 +1,93 @@
+<template>
+  <svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70">
+    <title>Bun Logo</title>
+    <path
+      id="Shadow"
+      d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"
+    />
+    <g id="Body">
+      <path
+        id="Background"
+        d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z"
+        style="fill: #fbf0df"
+      />
+      <path
+        id="Bottom_Shadow"
+        data-name="Bottom Shadow"
+        d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z"
+        style="fill: #f6dece"
+      />
+      <path
+        id="Light_Shine"
+        data-name="Light Shine"
+        d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z"
+        style="fill: #fffefc"
+      />
+      <path
+        id="Top"
+        d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z"
+        style="fill: #ccbea7; fill-rule: evenodd"
+      />
+      <path
+        id="Outline"
+        d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"
+      />
+    </g>
+    <g id="Mouth">
+      <g id="Background-2" data-name="Background">
+        <path
+          d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z"
+          style="fill: #b71422"
+        />
+      </g>
+      <g id="Tongue">
+        <path
+          id="Background-3"
+          data-name="Background"
+          d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z"
+          style="fill: #ff6164"
+        />
+        <path
+          id="Outline-2"
+          data-name="Outline"
+          d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"
+        />
+      </g>
+      <path
+        id="Outline-3"
+        data-name="Outline"
+        d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"
+      />
+    </g>
+    <g id="Face">
+      <ellipse
+        id="Right_Blush"
+        data-name="Right Blush"
+        cx="53.22"
+        cy="40.18"
+        rx="5.85"
+        ry="3.44"
+        style="fill: #febbd0"
+      />
+      <ellipse
+        id="Left_Bluch"
+        data-name="Left Bluch"
+        cx="22.95"
+        cy="40.18"
+        rx="5.85"
+        ry="3.44"
+        style="fill: #febbd0"
+      />
+      <path
+        id="Eyes"
+        d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z"
+        style="fill-rule: evenodd"
+      />
+      <path
+        id="Iris"
+        d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z"
+        style="fill: #fff; fill-rule: evenodd"
+      />
+    </g>
+  </svg>
+</template>

docs/src/components/IconBun.vue

@@ -1,44 +1,35 @@
 const angularDirectiveMain = {
-  angular: {
-    ext: "angular",
-    language: "jsx",
-    example: `import { NgModule } from '@angular/core';
-import { AutoAnimateModule } from '@formkit/auto-animate/angular'
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AutoAnimateModule],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-`,
-  },
-}
-
-const angularDirectiveApp = {
   angular: {
     ext: "angular",
     language: "jsx",
     example: `import { Component } from '@angular/core';
+import { AutoAnimateDirective } from '@formkit/auto-animate/angular';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [AutoAnimateDirective],
   template: \`
-    <div *ngFor="let story of stories">
-      <div class="story-card" auto-animate>
-        <h2>{{ story.title }}</h2>
-        <div *ngIf="story.showStory">{{ story.story }}</div>
-        <button (click)="story.showStory = !story.showStory">Toggle story</button>
+    @for (story of stories; track story.title) {
+      <div>
+        <div class="story-card" auto-animate>
+          <h2>{{ story.title }}</h2>
+          @if (story.showStory) {
+            <div>{{ story.story }}</div>
+          }
+          <button (click)="story.showStory = !story.showStory">Toggle story</button>
+        </div>
       </div>
-    </div>
-  \`
+    }
+  \`,
 })
 export class AppComponent {
-  stories = [
+  readonly stories = [
     {title: 'The Ant and The Grasshopper', showStory: false, story: "The ant and the grasshopper were good friends..."},
     {title: 'The Boy Who Cried Wolf', showStory: false, story: "There was once a shepherd boy who liked to play tricks..."},
   ];
-}`,
+}
+`,
   },
 }
-export { angularDirectiveMain, angularDirectiveApp }
+export { angularDirectiveMain }

docs/src/examples/angular/index.ts

@@ -14,4 +14,9 @@ export default {
     language: "shell",
     title: "~/my-app",
   },
+  bun:{
+    example:"bun install @formkit/auto-animate",
+    language:"shell",
+    title:"~/my-app",
+  },
 }

docs/src/examples/installation/index.ts

@@ -13,6 +13,10 @@ const routes: RouteRecordRaw[] = [
     path: "/tests-keep-alive",
     component: () => import("./pages/PageTestKeepAlive.vue"),
   },
+  {
+    path: "/bottom-jump-test",
+    component: () => import("./pages/PageBottomJumpTest.vue"),
+  },
   {
     path: "/:catchAll(.*)",
     redirect: "/",