@humanspeak/svelte-motion 0.1.14 → 0.1.17

package/README.md

@@ -117,7 +117,7 @@ This package carefully selects its dependencies to provide a robust and maintain
 | [Fancy Like Button](https://github.com/DRlFTER/fancyLikeButton)                                          | `/tests/random/fancy-like-button`        | [View Example](https://svelte.dev/playground/c34b7e53d41c48b0ab1eaf21ca120c6e?version=5.38.10) |
 | [Keyframes (square → circle → square; scale 1→2→1)](https://motion.dev/docs/react-animation#keyframes)   | `/tests/motion/keyframes`                | [View Example](https://svelte.dev/playground/05595ce0db124c1cbbe4e74fda68d717?version=5.38.10) |
 | [Animated Border Gradient (conic-gradient rotate)](https://www.youtube.com/watch?v=OgQI1-9T6ZA)          | `/tests/random/animated-border-gradient` | [View Example](https://svelte.dev/playground/6983a61b4c35441b8aa72a971de01a23?version=5.38.10) |
-| [Exit Animation](https://motion.dev/docs/react#exit-animations)                                          | `/tests/motion/animate-presence`         | [View Example](https://svelte.dev/playground/ef277e283d864653ace54e7453801601?version=5.38.10) |
+| [Exit Animation](https://motion.dev/docs/react#exit-animations)                                          | `/tests/animate-presence/basic`          | [View Example](https://svelte.dev/playground/ef277e283d864653ace54e7453801601?version=5.38.10) |
 
 ## Interactions
 

package/dist/components/AnimatePresence.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
-    import { createAnimatePresenceContext, setAnimatePresenceContext } from '../utils/presence'
+    import {
+        createAnimatePresenceContext,
+        setAnimatePresenceContext,
+        setPresenceDepth
+    } from '../utils/presence'
+    import { pwLog } from '../utils/log'
 
     /**
      * Provide `AnimatePresence` context to descendants.
@@ -10,15 +15,26 @@
      * styled clone is animated out before being removed from the DOM.
      *
      * @prop children Slotted content participating in presence.
+     * @prop initial When false, children skip their enter animation on initial mount.
      * @prop onExitComplete Optional callback invoked once all exits complete.
      */
-    const { children, onExitComplete } = $props<{
+    const {
+        children,
+        initial = true,
+        onExitComplete
+    } = $props<{
         children?: Snippet
+        initial?: boolean
         onExitComplete?: () => void
     }>()
 
-    const context = createAnimatePresenceContext({ onExitComplete })
+    pwLog('[AnimatePresence] mounting', { initial, hasOnExitComplete: !!onExitComplete })
+    const context = createAnimatePresenceContext({ initial, onExitComplete })
     setAnimatePresenceContext(context)
+
+    // Initialize presence depth to 0 for direct children
+    // Only direct children (depth 0) require explicit key props, matching Framer Motion behavior
+    setPresenceDepth(0)
 </script>
 
 <div class="animate-presence-container">
@@ -27,6 +43,6 @@
 
 <style>
     .animate-presence-container {
-        position: relative;
+        display: contents;
     }
 </style>

package/dist/components/AnimatePresence.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     children?: Snippet;
+    initial?: boolean;
     onExitComplete?: () => void;
 };
 declare const AnimatePresence: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/html/_MotionContainer.svelte

@@ -1,3 +1,8 @@
+<script lang="ts" module>
+    // Module-level counter for deterministic key generation (avoids SSR hydration mismatch)
+    let keyCounter = 0
+</script>
+
 <script lang="ts">
     import { getMotionConfig } from '../components/motionConfig.context'
     import type {
@@ -20,6 +25,7 @@
     import { attachWhileTap } from '../utils/interaction'
     import { attachWhileHover } from '../utils/hover'
     import { attachWhileFocus } from '../utils/focus'
+    import { attachWhileInView } from '../utils/inView'
     import {
         measureRect,
         computeFlipTransforms,
@@ -30,7 +36,12 @@
     import type { SvelteHTMLElements } from 'svelte/elements'
     import { mergeInlineStyles } from '../utils/style'
     import { isNativelyFocusable } from '../utils/a11y'
-    import { usePresence, getAnimatePresenceContext } from '../utils/presence'
+    import {
+        usePresence,
+        getAnimatePresenceContext,
+        getPresenceDepth,
+        setPresenceDepth
+    } from '../utils/presence'
     import { getInitialKeyframes } from '../utils/initial'
     import { attachDrag } from '../utils/drag'
     import { resolveInitial, resolveAnimate, resolveExit } from '../utils/variants'
@@ -41,7 +52,12 @@
         getInitialFalseContext
     } from '../components/variantContext.context'
     import { writable } from 'svelte/store'
-    import { transformSVGPathProperties, computeNormalizedSVGInitialAttrs } from '../utils/svg'
+    import {
+        transformSVGPathProperties,
+        computeNormalizedSVGInitialAttrs,
+        isSVGTag,
+        SVG_NAMESPACE
+    } from '../utils/svg'
 
     type Props = MotionProps & {
         children?: Snippet
@@ -52,6 +68,7 @@
     let {
         children,
         tag = 'div',
+        key: keyProp,
         variants: variantsProp,
         initial: initialProp,
         animate: animateProp,
@@ -64,11 +81,14 @@
         whileTap: whileTapProp,
         whileHover: whileHoverProp,
         whileFocus: whileFocusProp,
+        whileInView: whileInViewProp,
         whileDrag: whileDragProp,
         onHoverStart: onHoverStartProp,
         onHoverEnd: onHoverEndProp,
         onFocusStart: onFocusStartProp,
         onFocusEnd: onFocusEndProp,
+        onInViewStart: onInViewStartProp,
+        onInViewEnd: onInViewEndProp,
         onTapStart: onTapStartProp,
         onTap: onTapProp,
         onTapCancel: onTapCancelProp,
@@ -95,8 +115,35 @@
     let dataPath = $state<number>(-1)
     const motionConfig = $derived(getMotionConfig())
 
-    // Generate unique key for presence tracking
-    const presenceKey = `motion-${Math.random().toString(36).slice(2)}`
+    // Get presence context to check if we're inside AnimatePresence
+    const context = getAnimatePresenceContext()
+
+    // Get current presence depth (0 = direct child of AnimatePresence, undefined = not in AnimatePresence)
+    const presenceDepth = getPresenceDepth()
+
+    // Validate key prop only for direct children of AnimatePresence (depth 0)
+    // This matches Framer Motion behavior where only immediate children need keys
+    if (context && presenceDepth === 0 && !keyProp) {
+        throw new Error(
+            'motion elements that are direct children of AnimatePresence must have a `key` prop. ' +
+                'Example: <motion.div key="unique-id" />'
+        )
+    }
+
+    // Increment depth for descendants so nested motion elements don't require keys
+    if (presenceDepth !== undefined) {
+        setPresenceDepth(presenceDepth + 1)
+    }
+
+    // Use the provided key for presence tracking
+    // When not inside AnimatePresence, use a stable identifier based on component instance
+    const presenceKey = keyProp ?? `motion-${++keyCounter}`
+
+    // Track previous key for key-change detection (simulates React's key-based remounting)
+    // Using $state for idiomatic Svelte 5 reactivity
+    let keyTrackerPrev = $state(keyProp)
+    let keyTrackerIsTransitioning = $state(false)
+    let keyTransitionStopped = $state(false)
 
     // Compute merged transition without mutating props to avoid effect write loops
     const mergedTransition = $derived<AnimationOptions>(
@@ -118,12 +165,10 @@
         }
     })
 
-    const context = getAnimatePresenceContext()
     // Update presence context with current state when element is ready and has size
     $effect(() => {
         if (!(context && element && isLoaded === 'ready')) return
 
-        let rafId: number | null = null
         let lastWidth = 0
         let lastHeight = 0
         let stopped = false
@@ -132,11 +177,6 @@
             if (stopped || !element || !element.isConnected) return
             const rect = element.getBoundingClientRect()
             const style = getComputedStyle(element)
-            pwLog('[motion][measure]', {
-                w: rect.width,
-                h: rect.height,
-                transform: style.transform
-            })
             if (
                 Math.abs(rect.width - lastWidth) > 0.5 ||
                 Math.abs(rect.height - lastHeight) > 0.5
@@ -149,6 +189,7 @@
 
         // Observe size changes
         const resizeObserver = new ResizeObserver(() => {
+            pwLog('[motion][resize]', { key: presenceKey })
             measureAndUpdate()
         })
         try {
@@ -157,15 +198,8 @@
             // Ignore
         }
 
-        // Also poll on RAF to catch transform/layout-driven changes
-        const tick = () => {
-            if (stopped) return
-            measureAndUpdate()
-            rafId = requestAnimationFrame(tick)
-        }
-        rafId = requestAnimationFrame(tick)
-
         // Initial measure once
+        pwLog('[motion][initial-measure]', { key: presenceKey })
         measureAndUpdate()
 
         return () => {
@@ -175,7 +209,6 @@
             } catch {
                 // Ignore
             }
-            if (rafId) cancelAnimationFrame(rafId)
         }
     })
 
@@ -217,13 +250,23 @@
     )
 
     // Propagate initial={false} to children BEFORE setting variant context
+    // AnimatePresence initial={false} only applies on first render - check shouldAnimateEnter(key)
     const parentInitialFalse = getInitialFalseContext()
-    const effectiveInitialProp =
-        initialProp !== undefined
-            ? initialProp
-            : parentInitialFalse && variantsProp
-              ? false
-              : undefined
+    const presenceSkipEnter = context ? !context.shouldAnimateEnter(presenceKey) : false
+    const effectiveInitialProp = presenceSkipEnter
+        ? false
+        : initialProp !== undefined
+          ? initialProp
+          : parentInitialFalse && variantsProp
+            ? false
+            : undefined
+
+    pwLog('[motion] mount', {
+        presenceSkipEnter,
+        effectiveInitialProp,
+        initialProp,
+        animateProp
+    })
 
     if (initialProp === false) {
         setInitialFalseContext(true)
@@ -279,8 +322,20 @@
             initialKeyframes && 'pathLength' in initialKeyframes && isLoaded === 'mounting'
                 ? `${styleProp || ''};visibility:hidden`
                 : styleProp,
-            initialKeyframes as unknown as Record<string, unknown>,
-            resolvedAnimate as unknown as Record<string, unknown>
+            // Apply initialKeyframes as inline styles during mounting and initial phases
+            // The animation starts in RAF after 'initial' phase, so we need styles until then
+            // When ready AND we have initialKeyframes: DON'T set any animated properties!
+            // WAAPI is controlling them and inline styles can override the animation
+            isLoaded === 'mounting' || isLoaded === 'initial'
+                ? (initialKeyframes as unknown as Record<string, unknown>)
+                : undefined,
+            // Only use resolvedAnimate as fallback when we DON'T have initialKeyframes
+            // If we have initialKeyframes, the enter animation is running - setting
+            // inline styles to the target values will override the WAAPI animation
+            // Use isNotEmpty to handle empty initial objects (initial: {}) which should fallback
+            isNotEmpty(initialKeyframes)
+                ? undefined
+                : (resolvedAnimate as unknown as Record<string, unknown>)
         ),
         class: classProp
     })
@@ -357,7 +412,16 @@
     })
 
     const runAnimation = () => {
-        if (!element || !resolvedAnimate) return
+        pwLog('[motion] runAnimation called', {
+            hasElement: !!element,
+            resolvedAnimate,
+            mergedTransition
+        })
+        if (!element || !resolvedAnimate) {
+            pwLog('[motion] runAnimation bailing - no element or resolvedAnimate')
+            return
+        }
+
         const transitionAnimate: MotionTransition = mergedTransition ?? {}
         let payload = $state.snapshot(resolvedAnimate)
 
@@ -373,6 +437,11 @@
             ;(element as HTMLElement).style.removeProperty('stroke-dashoffset')
         }
 
+        pwLog('[motion] runAnimation animating', {
+            payload,
+            transitionAnimate
+        })
+
         animateWithLifecycle(
             element,
             payload as unknown as DOMKeyframesDefinition,
@@ -385,6 +454,12 @@
     // Track the last variant key we ran to avoid re-running on mount
     let lastRanVariantKey = $state<string | undefined>(undefined)
     let mountedWithInitialFalse = $state(false)
+    // Track if the initial->animate transition has already been triggered by main effect
+    let initialAnimationTriggered = $state(false)
+    // Track if we've run the animation for object animateProp on this mount
+    let objectAnimateRanOnMount = $state(false)
+    // Track the serialized animateProp to detect changes for object animate props
+    let lastAnimatePropJson = $state<string | undefined>(undefined)
     const currentAnimateKey = $derived(
         typeof animateProp === 'string'
             ? animateProp
@@ -487,6 +562,111 @@
         )
     })
 
+    // whileInView handling for viewport intersection
+    $effect(() => {
+        if (!(element && isLoaded === 'ready' && isNotEmpty(whileInViewProp))) return
+        return attachWhileInView(
+            element!,
+            (whileInViewProp ?? {}) as Record<string, unknown>,
+            (mergedTransition ?? {}) as AnimationOptions,
+            {
+                onStart: onInViewStartProp,
+                onEnd: onInViewEndProp,
+                onAnimationComplete: onAnimationCompleteProp
+            },
+            {
+                initial: (resolvedInitial ?? {}) as Record<string, unknown>,
+                animate: (resolvedAnimate ?? {}) as Record<string, unknown>
+            }
+        )
+    })
+
+    // Handle key prop changes inside AnimatePresence (simulates React's key-based remounting)
+    // When key changes, run exit → initial → animate sequence on the same element
+    $effect(() => {
+        // Access keyProp to create reactive dependency
+        const currentKey = keyProp
+
+        // Only handle key changes when:
+        // 1. We're inside AnimatePresence (context exists)
+        // 2. Element is ready (not during initial mount)
+        // 3. Key actually changed (not undefined → value on mount)
+        // 4. Not already transitioning
+        if (
+            !context ||
+            !element ||
+            isLoaded !== 'ready' ||
+            keyTrackerIsTransitioning ||
+            currentKey === keyTrackerPrev ||
+            keyTrackerPrev === undefined
+        ) {
+            // Update prev for next comparison
+            if (currentKey !== keyTrackerPrev) {
+                keyTrackerPrev = currentKey
+            }
+            return
+        }
+
+        pwLog('[motion] key changed, running exit→initial→animate', {
+            prevKey: keyTrackerPrev,
+            newKey: currentKey
+        })
+
+        // Mark as transitioning to prevent re-entry
+        keyTrackerIsTransitioning = true
+        keyTrackerPrev = currentKey
+
+        // Run the key transition sequence
+        const runKeyTransition = async () => {
+            try {
+                // 1. Run exit animation if defined
+                if (resolvedExit && element && !keyTransitionStopped) {
+                    const exitKeyframes = { ...(resolvedExit as Record<string, unknown>) }
+                    // Remove transition from keyframes (it's passed separately)
+                    delete exitKeyframes.transition
+
+                    pwLog('[motion] key transition: running exit', { exitKeyframes })
+                    await animate(
+                        element,
+                        exitKeyframes as DOMKeyframesDefinition,
+                        mergedTransition
+                    ).finished
+                }
+
+                // Check if component was unmounted during exit animation
+                if (keyTransitionStopped || !element) return
+
+                // 2. Snap to initial state
+                if (initialKeyframes && element) {
+                    const transformedInitial = transformSVGPathProperties(
+                        element,
+                        initialKeyframes as Record<string, unknown>
+                    )
+                    pwLog('[motion] key transition: snapping to initial', { transformedInitial })
+                    animate(element, transformedInitial as DOMKeyframesDefinition, { duration: 0 })
+                }
+
+                // Check again before running enter animation
+                if (keyTransitionStopped || !element) return
+
+                // 3. Run enter animation
+                pwLog('[motion] key transition: running enter animation')
+                runAnimation()
+            } finally {
+                if (!keyTransitionStopped) {
+                    keyTrackerIsTransitioning = false
+                }
+            }
+        }
+
+        runKeyTransition()
+
+        // Cleanup on unmount
+        return () => {
+            keyTransitionStopped = true
+        }
+    })
+
     // Re-run animate when animateProp changes while ready
     $effect(() => {
         if (!(element && isLoaded === 'ready')) return
@@ -500,15 +680,39 @@
             // Variant has changed, so we should animate
             mountedWithInitialFalse = false
         }
+        // Skip if the initial animation was already triggered by the main effect
+        if (initialAnimationTriggered) {
+            pwLog('[motion] effect: skipping, initial animation already triggered')
+            initialAnimationTriggered = false
+            // Also mark object animate as ran to prevent duplicate runs from effect re-triggers
+            if (animateProp && typeof animateProp !== 'string') {
+                objectAnimateRanOnMount = true
+            }
+            return
+        }
         if (typeof animateProp === 'string') {
             if (lastRanVariantKey !== animateProp) {
                 lastRanVariantKey = animateProp
                 runAnimation()
             }
         } else if (animateProp) {
-            // Object animate props - always run
-            lastRanVariantKey = undefined
-            runAnimation()
+            // Object animate props - detect if the prop actually changed
+            const currentJson = JSON.stringify(animateProp)
+            const propChanged = lastAnimatePropJson !== currentJson
+
+            // Reset flag if animate prop changed
+            if (propChanged) {
+                objectAnimateRanOnMount = false
+                lastAnimatePropJson = currentJson
+            }
+
+            // Only run if we haven't already animated on this mount (or prop changed)
+            // This prevents duplicate animations when Svelte re-triggers the effect
+            if (!objectAnimateRanOnMount) {
+                objectAnimateRanOnMount = true
+                lastRanVariantKey = undefined
+                runAnimation()
+            }
         }
     })
 
@@ -539,9 +743,18 @@
     $effect(() => {
         if (!(element && isLoaded === 'mounting')) return
 
+        pwLog('[motion] main effect running', {
+            effectiveAnimate: !!effectiveAnimate,
+            effectiveInitialProp,
+            resolvedAnimate,
+            initialKeyframes,
+            hasInitialKeyframes: isNotEmpty(initialKeyframes)
+        })
+
         if (effectiveAnimate) {
             // If initial={false}, render at animate state immediately with no transition
             if (effectiveInitialProp === false && resolvedAnimate) {
+                pwLog('[motion] path: initial=false, skip to animate')
                 // Use Motion's animate() with duration:0 so it takes control of these properties
                 // This prevents inline styles from pinning the properties during future animations
                 let snapshot = $state.snapshot(resolvedAnimate) as Record<string, unknown>
@@ -555,6 +768,7 @@
                 dataPath = 5
                 isLoaded = 'ready'
             } else if (isNotEmpty(initialKeyframes)) {
+                pwLog('[motion] path: has initialKeyframes, will animate to target')
                 // Apply initial instantly BEFORE exposing 'initial' state
                 const transformedInitial = transformSVGPathProperties(
                     element!,
@@ -598,11 +812,29 @@
                     if (isPlaywright) {
                         await sleep(10)
                     }
-                    isLoaded = 'ready'
+                    pwLog('[motion] RAF: promoting to ready and running animation')
+
+                    // Mark that we're triggering the initial animation to prevent duplicate runs
+                    initialAnimationTriggered = true
 
+                    // IMPORTANT: Start the animation BEFORE changing isLoaded.
+                    // When isLoaded changes to 'ready', Svelte will reactively remove the
+                    // initial inline styles. We need the animation to capture the current
+                    // state (from inline styles) before they're removed.
                     runAnimation()
+
+                    // CRITICAL: Wait for the next animation frame before changing isLoaded.
+                    // This gives WAAPI time to:
+                    // 1. Parse and create the animation
+                    // 2. Start the animation layer
+                    // 3. Lock in the "from" values from current computed style
+                    // Only THEN can we safely clear inline styles without killing the animation
+                    requestAnimationFrame(() => {
+                        isLoaded = 'ready'
+                    })
                 })
             } else {
+                pwLog('[motion] path: no initialKeyframes, skip to ready')
                 dataPath = 2
                 isLoaded = 'ready'
                 // If we're inheriting a variant and parent had initial={false}, apply the variant instantly
@@ -644,7 +876,15 @@
 </script>
 
 {#if isVoidTag}
-    <svelte:element this={tag} bind:this={element} {...derivedAttrs} />
+    {#if isSVGTag(String(tag))}
+        <svelte:element this={tag} bind:this={element} xmlns={SVG_NAMESPACE} {...derivedAttrs} />
+    {:else}
+        <svelte:element this={tag} bind:this={element} {...derivedAttrs} />
+    {/if}
+{:else if isSVGTag(String(tag))}
+    <svelte:element this={tag} bind:this={element} xmlns={SVG_NAMESPACE} {...derivedAttrs}>
+        {@render children?.()}
+    </svelte:element>
 {:else}
     <svelte:element this={tag} bind:this={element} {...derivedAttrs}>
         {@render children?.()}

package/dist/index.d.ts

@@ -3,11 +3,15 @@ import MotionConfig from './components/MotionConfig.svelte';
 import type { MotionComponents } from './html/index';
 export declare const motion: MotionComponents;
 export { animate, hover } from 'motion';
-export type { DragAxis, DragConstraints, DragControls, DragInfo, DragTransition, MotionAnimate, MotionInitial, MotionOnDirectionLock, MotionOnDragTransitionEnd, MotionTransition, MotionWhileDrag, MotionWhileFocus, MotionWhileHover, MotionWhileTap, Variants } from './types';
+export type { DragAxis, DragConstraints, DragControls, DragInfo, DragTransition, MotionAnimate, MotionInitial, MotionOnDirectionLock, MotionOnDragTransitionEnd, MotionOnInViewEnd, MotionOnInViewStart, MotionTransition, MotionWhileDrag, MotionWhileFocus, MotionWhileHover, MotionWhileInView, MotionWhileTap, Variants } from './types';
 export { useAnimationFrame } from './utils/animationFrame';
 export { createDragControls } from './utils/dragControls';
 export { useSpring } from './utils/spring';
+/**
+ * @deprecated Use `styleString` instead for reactive styles with automatic unit handling.
+ */
 export { stringifyStyleObject } from './utils/styleObject';
+export { styleString } from './utils/styleObject.svelte';
 export { useTime } from './utils/time';
 export { useTransform } from './utils/transform';
 export { AnimatePresence, MotionConfig };

package/dist/index.js

@@ -8,7 +8,11 @@ export { animate, hover } from 'motion';
 export { useAnimationFrame } from './utils/animationFrame';
 export { createDragControls } from './utils/dragControls';
 export { useSpring } from './utils/spring';
+/**
+ * @deprecated Use `styleString` instead for reactive styles with automatic unit handling.
+ */
 export { stringifyStyleObject } from './utils/styleObject';
+export { styleString } from './utils/styleObject.svelte';
 export { useTime } from './utils/time';
 export { useTransform } from './utils/transform';
 export { AnimatePresence, MotionConfig };

package/dist/types.d.ts

@@ -121,6 +121,18 @@ export type MotionWhileFocus = (Record<string, unknown> & {
 export type MotionWhileDrag = (Record<string, unknown> & {
     transition?: AnimationOptions;
 }) | DOMKeyframesDefinition | undefined;
+/**
+ * Animation properties for in-view interactions.
+ * When the element enters the viewport, it animates to this state; when it leaves,
+ * it animates back to its baseline (from animate/initial), restoring only the changed keys.
+ * @example
+ * ```svelte
+ * <motion.div whileInView={{ opacity: 1, y: 0 }} />
+ * ```
+ */
+export type MotionWhileInView = (Record<string, unknown> & {
+    transition?: AnimationOptions;
+}) | DOMKeyframesDefinition | undefined;
 /**
  * Animation transition configuration for hover interactions.
  * Overrides the global transition when provided.
@@ -136,6 +148,9 @@ export type MotionOnHoverEnd = (() => void) | undefined;
 /** Focus lifecycle callbacks */
 export type MotionOnFocusStart = (() => void) | undefined;
 export type MotionOnFocusEnd = (() => void) | undefined;
+/** InView lifecycle callbacks */
+export type MotionOnInViewStart = (() => void) | undefined;
+export type MotionOnInViewEnd = (() => void) | undefined;
 /** Tap lifecycle callbacks */
 export type MotionOnTapStart = (() => void) | undefined;
 export type MotionOnTap = (() => void) | undefined;
@@ -190,6 +205,21 @@ export type DragControls = {
  * Base motion props shared by all motion components.
  */
 export type MotionProps = {
+    /**
+     * Unique key for AnimatePresence tracking.
+     * Required when inside an AnimatePresence component.
+     * Used to track enter/exit state and determine whether to animate.
+     *
+     * @example
+     * ```svelte
+     * <AnimatePresence>
+     *   {#if isVisible}
+     *     <motion.div key="box" exit={{ opacity: 0 }} />
+     *   {/if}
+     * </AnimatePresence>
+     * ```
+     */
+    key?: string;
     /** Variants define named animation states */
     variants?: Variants;
     /** Initial state of the animation (object or variant key) */
@@ -208,6 +238,8 @@ export type MotionProps = {
     whileFocus?: MotionWhileFocus;
     /** Drag interaction animation */
     whileDrag?: MotionWhileDrag;
+    /** In-view interaction animation - animates when element enters viewport */
+    whileInView?: MotionWhileInView;
     /** Called right before a main animate transition starts */
     onAnimationStart?: MotionAnimationStart;
     /** Called after a main animate transition completes */
@@ -220,6 +252,10 @@ export type MotionProps = {
     onFocusStart?: MotionOnFocusStart;
     /** Called when element loses keyboard focus */
     onFocusEnd?: MotionOnFocusEnd;
+    /** Called when element enters viewport */
+    onInViewStart?: MotionOnInViewStart;
+    /** Called when element leaves viewport */
+    onInViewEnd?: MotionOnInViewEnd;
     /** Called when a tap gesture starts (pointerdown recognized) */
     onTapStart?: MotionOnTapStart;
     /** Called when a tap gesture ends successfully (pointerup) */

package/dist/utils/animation.js

@@ -1,3 +1,4 @@
+import { pwLog } from './log';
 import { hasFinishedPromise, isPromiseLike } from './promise';
 import { animate } from 'motion';
 /**
@@ -32,12 +33,17 @@ export const mergeTransitions = (...args) => {
  * @param onStart Optional lifecycle fired before animation starts.
  * @param onComplete Optional lifecycle fired after animation completes.
  */
-export const animateWithLifecycle = (el, keyframes, transition, 
-/* trunk-ignore(eslint/no-unused-vars) */
-onStart, 
-/* trunk-ignore(eslint/no-unused-vars) */
-onComplete) => {
+export const animateWithLifecycle = (el, keyframes, transition, onStart, onComplete) => {
     const payload = keyframes;
+    const computed = getComputedStyle(el);
+    pwLog('[animateWithLifecycle] starting', {
+        keyframes: payload,
+        transition,
+        currentOpacity: el.style.opacity,
+        currentTransform: el.style.transform,
+        computedOpacity: computed.opacity,
+        computedTransform: computed.transform
+    });
     onStart?.(payload);
     const controls = animate(el, payload, transition);
     if (hasFinishedPromise(controls)) {