wix · marine-bre · Feb 22, 2026 · Feb 23, 2026 · Feb 23, 2026 · Feb 23, 2026
diff --git a/.github/workflows/motion-e2e.yml b/.github/workflows/motion-e2e.yml
@@ -32,7 +32,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
-          node-version: 24
+          node-version-file: '.nvmrc'
           registry-url: https://registry.npmjs.org
 
       - name: Cache Yarn dependencies
@@ -88,11 +88,3 @@ jobs:
         if: ${{ github.event.inputs.browser == 'all' }}
         working-directory: packages/motion
         run: npx playwright test
-
-      - name: Upload Playwright report
-        if: ${{ always() }}
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
-        with:
-          name: playwright-report
-          path: packages/motion/playwright-report/
-          retention-days: 14
diff --git a/.gitignore b/.gitignore
@@ -8,5 +8,6 @@ coverage/
 .idea/
 *.log
 pnpm-lock.yaml
+package-lock.json
 .yarn/
 tmp/
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.9.3",
     "vite": "^7.2.2"
   }

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.9.3",
     "vite": "^7.2.2"
   }

diff --git a/packages/motion/.gitignore b/packages/motion/.gitignore
@@ -1,5 +1,7 @@
 dist
 node_modules
+test-results
+playwright-report
 *npm-debug.log
 target
 maven

diff --git a/packages/motion/e2e/constants/animation-group.ts b/packages/motion/e2e/constants/animation-group.ts
@@ -0,0 +1,5 @@
+export const ANIMATION_GROUP_IDS = {
+  item1: 'group-item-1',
+  item2: 'group-item-2',
+  item3: 'group-item-3',
+} as const;
diff --git a/packages/motion/e2e/constants/effects.ts b/packages/motion/e2e/constants/effects.ts
@@ -0,0 +1,20 @@
+export const EFFECTS_TARGET_IDS = {
+  namedWaapi: 'named-waapi-target',
+  namedCss: 'named-css-target',
+  keyframeWaapi: 'keyframe-waapi-target',
+  keyframeCss: 'keyframe-css-target',
+  customEffect: 'custom-effect-target',
+  playback: 'playback-target',
+} as const;
+
+export const EFFECTS_TEST_IDS = {
+  playbackStateDisplay: 'playback-state-display',
+} as const;
+
+export const EFFECTS_NAMES = {
+  namedCssEffectType: 'TestScale',
+  namedCssKeyframeName: 'test-scale',
+  keyframeCssName: 'kf-rotate',
+  keyframeWaapiName: 'kf-slide',
+  playbackName: 'playback-test',
+} as const;
diff --git a/packages/motion/e2e/constants/pointer.ts b/packages/motion/e2e/constants/pointer.ts
@@ -0,0 +1,21 @@
+export const POINTER_IDS = {
+  area: 'pointer-area',
+  yAxisArea: 'y-axis-area',
+  compositeArea: 'composite-area',
+  xAxisTarget: 'x-axis-target',
+  yAxisTarget: 'y-axis-target',
+  compositeTarget: 'composite-target',
+} as const;
+
+export const POINTER_TEST_IDS = {
+  area: 'pointer-area',
+  yAxisArea: 'y-axis-area',
+  compositeArea: 'composite-area',
+  progressDisplay: 'pointer-progress-display',
+} as const;
+
+export const POINTER_SELECTORS = {
+  area: `[data-testid="${POINTER_TEST_IDS.area}"]`,
+  yAxisArea: `[data-testid="${POINTER_TEST_IDS.yAxisArea}"]`,
+  compositeArea: `[data-testid="${POINTER_TEST_IDS.compositeArea}"]`,
+} as const;
diff --git a/packages/motion/e2e/constants/scroll.ts b/packages/motion/e2e/constants/scroll.ts
@@ -0,0 +1,17 @@
+export const SCROLL_IDS = {
+  viewProgressTarget: 'view-progress-target',
+  scrubCard1: 'scrub-card-1',
+  scrubCard2: 'scrub-card-2',
+  scrubCard3: 'scrub-card-3',
+} as const;
+
+export const SCROLL_TEST_IDS = {
+  viewProgressTarget: 'view-progress-target',
+  scrubCard1: 'scrub-card-1',
+  progressDisplay: 'progress-display',
+} as const;
+
+export const SCROLL_SELECTORS = {
+  viewProgressTarget: `[data-testid="${SCROLL_TEST_IDS.viewProgressTarget}"]`,
+  scrubCard1: `[data-testid="${SCROLL_TEST_IDS.scrubCard1}"]`,
+} as const;
diff --git a/packages/motion/e2e/fixtures/animation-group.html b/packages/motion/e2e/fixtures/animation-group.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AnimationGroup API</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <style>
+      body {
+        padding: 72px 24px 48px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 32px;
+      }
+
+      .group-container {
+        display: flex;
+        gap: 16px;
+      }
+
+      .group-item {
+        width: 80px;
+        height: 80px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-weight: bold;
+        font-size: 13px;
+      }
+
+      #group-item-1 {
+        background: #e74c3c;
+      }
+      #group-item-2 {
+        background: #3498db;
+      }
+      #group-item-3 {
+        background: #2ecc71;
+      }
+
+      .controls {
+        display: flex;
+        gap: 8px;
+      }
+
+      button {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        background: #4a90d9;
+        color: #fff;
+      }
+
+      button:hover {
+        background: #357abd;
+      }
+    </style>
+  </head>
+  <body>
+    <nav class="fixture-nav">
+      <strong>AnimationGroup Fixture</strong>
+      <a href="./index.html">← Back</a>
+    </nav>
+
+    <div class="group-container">
+      <div id="group-item-1" class="group-item" data-testid="group-item-1">A</div>
+      <div id="group-item-2" class="group-item" data-testid="group-item-2">B</div>
+      <div id="group-item-3" class="group-item" data-testid="group-item-3">C</div>
+    </div>
+
+    <div class="controls">
+      <button data-testid="btn-play" onclick="window.play()">Play</button>
+      <button data-testid="btn-pause" onclick="window.pause()">Pause</button>
+      <button data-testid="btn-reverse" onclick="window.reverse()">Reverse</button>
+      <button data-testid="btn-cancel" onclick="window.cancel()">Cancel</button>
+    </div>
+
+    <script type="module" src="./animation-group.ts"></script>
+  </body>
+</html>
diff --git a/packages/motion/e2e/fixtures/animation-group.ts b/packages/motion/e2e/fixtures/animation-group.ts
@@ -0,0 +1,71 @@
+import { getWebAnimation } from '@wix/motion';
+import type { AnimationGroup } from '@wix/motion';
+import { ANIMATION_GROUP_IDS } from '../constants/animation-group';
+
+type AnimationGroupFixtureWindow = typeof window & {
+  animationGroup: AnimationGroup;
+  lifecycleEvents: string[];
+  play: () => Promise<void>;
+  pause: () => void;
+  reverse: () => Promise<void>;
+  cancel: () => void;
+};
+
+const items = [
+  document.getElementById(ANIMATION_GROUP_IDS.item1) as HTMLElement,
+  document.getElementById(ANIMATION_GROUP_IDS.item2) as HTMLElement,
+  document.getElementById(ANIMATION_GROUP_IDS.item3) as HTMLElement,
+];
+
+const lifecycleEvents: string[] = [];
+
+function recordEvent(name: string) {
+  lifecycleEvents.push(name);
+}
+
+const groups = items.map((item, i) =>
+  getWebAnimation(item, {
+    keyframeEffect: {
+      name: `group-item-${i}`,
+      keyframes: [
+        { offset: 0, opacity: 0, transform: 'scale(0.5)' },
+        { offset: 1, opacity: 1, transform: 'scale(1)' },
+      ],
+    },
+    duration: 800,
+    delay: i * 100,
+    fill: 'both',
+    easing: 'linear',
+  }),
+) as AnimationGroup[];
+
+async function play(): Promise<void> {
+  recordEvent('play');
+  await Promise.all(groups.map((g) => g.play()));
+  recordEvent('play:ready');
+  groups[0].onFinish(() => recordEvent('finish'));
+}
+
+function pause(): void {
+  recordEvent('pause');
+  groups.forEach((g) => g.pause());
+}
+
+async function reverse(): Promise<void> {
+  recordEvent('reverse');
+  await Promise.all(groups.map((g) => g.reverse()));
+  recordEvent('reverse:ready');
+}
+
+function cancel(): void {
+  recordEvent('cancel');
+  groups.forEach((g) => g.cancel());
+}
+
+// Expose the first group as animationGroup — tests read progress/playState from it
+(window as AnimationGroupFixtureWindow).animationGroup = groups[0];
+(window as AnimationGroupFixtureWindow).lifecycleEvents = lifecycleEvents;
+(window as AnimationGroupFixtureWindow).play = play;
+(window as AnimationGroupFixtureWindow).pause = pause;
+(window as AnimationGroupFixtureWindow).reverse = reverse;
+(window as AnimationGroupFixtureWindow).cancel = cancel;
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,5 +8,6 @@ coverage/ @@
     .idea/
     *.log
     pnpm-lock.yaml
+    package-lock.json
     .yarn/
     tmp/