@humanspeak/svelte-motion 0.1.24 → 0.1.25

package/README.md

@@ -44,7 +44,7 @@ Goal: Framer Motion API parity for Svelte where common React examples can be tra
 | Drag (`drag`, constraints, momentum, controls, callbacks) | Supported                       |
 | `AnimatePresence` (`initial`, `mode`, `onExitComplete`)   | Supported                       |
 | Layout (`layout`, `layout="position"`)                    | Supported (single-element FLIP) |
-| Shared layout (`layoutId`)                                | Not yet supported               |
+| Shared layout (`layoutId`)                                | Supported                       |
 | Pan gesture API (`whilePan`, `onPan*`)                    | Not yet supported               |
 | `MotionConfig` parity beyond `transition`                 | Partial                         |
 | `reducedMotion`, `features`, `transformPagePoint`         | Not yet supported               |

package/dist/html/_MotionContainer.svelte

@@ -57,6 +57,7 @@
         isSVGTag,
         SVG_NAMESPACE
     } from '../utils/svg'
+    import { getLayoutIdRegistry } from '../utils/layoutId'
 
     type Props = MotionProps & {
         children?: Snippet
@@ -107,6 +108,7 @@
         dragListener: dragListenerProp,
         dragControls: dragControlsProp,
         layout: layoutProp,
+        layoutId: layoutIdProp,
         ref: element = $bindable(null),
         ...rest
     }: Props = $props()
@@ -117,6 +119,9 @@
     // Get presence context to check if we're inside AnimatePresence
     const context = getAnimatePresenceContext()
 
+    // Get layoutId registry (provided by AnimatePresence or a parent LayoutGroup)
+    const layoutIdRegistry = getLayoutIdRegistry()
+
     // Get current presence depth (0 = direct child of AnimatePresence, undefined = not in AnimatePresence)
     const presenceDepth = getPresenceDepth()
 
@@ -163,6 +168,36 @@
         })
     }
 
+    // Keep a live snapshot of the layoutId element's rect so the next element can FLIP from it.
+    // We store the last-known-good rect and push it to the registry on cleanup,
+    // because onDestroy fires after the element is removed from DOM (rect would be zeros).
+    let layoutIdLastRect: DOMRect | null = null
+    $effect(() => {
+        if (!(element && layoutIdProp && layoutIdRegistry)) return
+
+        // Capture rect on every frame while mounted
+        let rafId: number
+        const captureRect = () => {
+            if (element) {
+                layoutIdLastRect = element.getBoundingClientRect()
+            }
+            rafId = requestAnimationFrame(captureRect)
+        }
+        rafId = requestAnimationFrame(captureRect)
+
+        // On cleanup (before DOM removal), push last-known rect to registry
+        return () => {
+            cancelAnimationFrame(rafId)
+            if (layoutIdLastRect && layoutIdProp) {
+                layoutIdRegistry.snapshot(
+                    layoutIdProp,
+                    layoutIdLastRect,
+                    (mergedTransition ?? {}) as AnimationOptions
+                )
+            }
+        }
+    })
+
     // Reactively update registration when element/exit/transition props change
     $effect(() => {
         if (element && context && resolvedExit) {
@@ -611,6 +646,25 @@
         }
     })
 
+    // Shared layout animation via layoutId.
+    // On mount, consume the previous snapshot and FLIP from its position.
+    $effect(() => {
+        if (!(element && layoutIdProp && layoutIdRegistry && isLoaded === 'ready')) return
+
+        const prev = layoutIdRegistry.consume(layoutIdProp)
+        if (!prev) return // First appearance, no animation needed
+
+        const next = measureRect(element)
+        const transforms = computeFlipTransforms(prev.rect, next, true)
+
+        setCompositorHints(element, true)
+        runFlipAnimation(
+            element,
+            transforms,
+            (prev.transition ?? mergedTransition ?? {}) as AnimationOptions
+        )
+    })
+
     // whileTap handling via motion-dom's press()
     $effect(() => {
         if (!(element && isLoaded === 'ready' && isNotEmpty(whileTapProp))) return

package/dist/types.d.ts

@@ -278,6 +278,8 @@ export type MotionProps = {
     class?: string;
     /** Enable FLIP layout animations; "position" limits to translation only */
     layout?: boolean | 'position';
+    /** Shared layout animation identifier. Elements with matching layoutId animate between positions. */
+    layoutId?: string;
     /** Ref to the element */
     ref?: HTMLElement | null;
     /** Enable drag gestures. true for both axes, or lock to 'x'/'y'. */

package/dist/utils/layoutId.d.ts

@@ -0,0 +1,24 @@
+import type { AnimationOptions } from 'motion';
+/**
+ * Snapshot stored for a layoutId when an element unmounts.
+ */
+type LayoutIdEntry = {
+    rect: DOMRect;
+    transition?: AnimationOptions;
+};
+/**
+ * Registry that stores last-known rect + transition for each layoutId.
+ *
+ * - `snapshot(id, rect, transition)` — called when an element with a layoutId unmounts.
+ * - `consume(id)` — called by a newly mounted element. Returns and **deletes** the entry (one-shot).
+ */
+export type LayoutIdRegistry = {
+    snapshot(id: string, rect: DOMRect, transition?: AnimationOptions): void;
+    consume(id: string): LayoutIdEntry | undefined;
+};
+export declare const layoutIdRegistry: LayoutIdRegistry;
+/**
+ * Get the global layoutId registry.
+ */
+export declare function getLayoutIdRegistry(): LayoutIdRegistry;
+export {};

package/dist/utils/layoutId.js

@@ -0,0 +1,23 @@
+/**
+ * Module-level singleton registry shared across the entire component tree.
+ * This matches React Framer Motion's behavior where layoutId is shared globally
+ * (or within a LayoutGroup, which we can add later).
+ */
+const entries = new Map();
+export const layoutIdRegistry = {
+    snapshot(id, rect, transition) {
+        entries.set(id, { rect, transition });
+    },
+    consume(id) {
+        const entry = entries.get(id);
+        if (entry)
+            entries.delete(id);
+        return entry;
+    }
+};
+/**
+ * Get the global layoutId registry.
+ */
+export function getLayoutIdRegistry() {
+    return layoutIdRegistry;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "A lightweight animation library for Svelte 5 that provides smooth, hardware-accelerated animations. Features include spring physics, custom easing, and fluid transitions. Built on top of the motion library, it offers a simple API for creating complex animations with minimal code. Perfect for interactive UIs, micro-interactions, and engaging user experiences.",
   "keywords": [
     "svelte",