@tamagui/animations-motion 2.7.7 → 3.0.0-beta.643.1

package/src/createAnimations.tsx

@@ -7,6 +7,8 @@ import {
   getConfig,
   getSplitStyles,
   hooks,
+  normalizeValueWithProperty,
+  type OnTransition,
   styleToCSS,
   Text,
   TransitionProp,
@@ -15,6 +17,8 @@ import {
   useIsomorphicLayoutEffect,
   useThemeWithState,
   View,
+  createRefComponent,
+  transformsToString,
 } from '@tamagui/web'
 import {
   animate as animateMotionValue,
@@ -27,14 +31,7 @@ import {
   useMotionValueEvent,
   type ValueTransition,
 } from 'motion/react'
-import React, {
-  forwardRef,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
 const isServer = typeof window === 'undefined'
 
@@ -43,7 +40,7 @@ const isServer = typeof window === 'undefined'
 // don't need animations so we return a no-op scope/animate pair.
 function useAnimateSSRSafe() {
   if (isServer) {
-    return [useRef(null), (() => {}) as any] as ReturnType<typeof useAnimate>
+    return [useRef(null), (() => {}) as any] as unknown as ReturnType<typeof useAnimate>
   }
   return useAnimate()
 }
@@ -57,6 +54,20 @@ type MotionAnimatedNumberStyle = {
   motionValues?: MotionValue<number>[]
 }
 
+const asStyleRecord = (style: unknown): Record<string, unknown> =>
+  style && typeof style === 'object' && !Array.isArray(style)
+    ? (style as Record<string, unknown>)
+    : {}
+
+// raw CSSOM assignment (unlike React's style prop) silently ignores unitless
+// numbers, and the core hands the inline-output driver RN-format numeric
+// values — suffix px the way React would before writing
+function assignInlineStyles(node: HTMLElement, styles: Record<string, unknown>) {
+  for (const key in styles) {
+    node.style[key] = normalizeValueWithProperty(styles[key], key)
+  }
+}
+
 /**
  * Animation options with optional default and per-property configs.
  * This extends AnimationOptions to support the default key.
@@ -137,8 +148,15 @@ type MotionRefs = {
   animationState: 'enter' | 'exit' | 'default'
   frozenExitTarget: Record<string, unknown> | null
   exitCompleteScheduled: boolean
+  enterCompleteScheduled: boolean
+  disableAnimation: boolean
   wasEntering: boolean
   wasDisabled: boolean
+  onTransition: OnTransition | null | undefined
+  enterStarted: boolean
+  exitStarted: boolean
+  updateInFlight: boolean
+  updateControls: AnimationPlaybackControlsWithThen | null
   wasNoClass: boolean
 }
 
@@ -176,6 +194,7 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
         stateRef,
         useStyleEmitter,
         presence,
+        onTransition,
         styleProps,
       } = animationProps
 
@@ -205,12 +224,29 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
           animationState: 'default',
           frozenExitTarget: null,
           exitCompleteScheduled: false,
+          enterCompleteScheduled: false,
+          disableAnimation: true,
           wasEntering: false,
           wasDisabled: false,
+          onTransition: undefined,
+          enterStarted: false,
+          exitStarted: false,
+          updateInFlight: false,
+          updateControls: null,
           wasNoClass: !!styleProps.noClass,
         }
       }
 
+      const emit = (
+        phase: 'start' | 'end',
+        cause: 'enter' | 'exit' | 'update',
+        finished?: boolean
+      ) => {
+        refs.current.onTransition?.(
+          phase === 'end' ? { phase, cause, finished } : { phase, cause }
+        )
+      }
+
       // track entering state transitions
       const justFinishedEntering = refs.current.wasEntering && !isEntering
       useEffect(() => {
@@ -227,12 +263,14 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
       // disable animation during hydration and mounting (prevents "flying across the page")
       const disableAnimation = isComponentHydrating || isMounting || !animationKey
 
-      const [scope, animate] = useAnimateSSRSafe()
+      const [scope] = useAnimateSSRSafe()
 
       // sync ref values for reliable access from callbacks
       refs.current.isExiting = isExiting
       refs.current.sendExitComplete = sendExitComplete
       refs.current.animationState = animationState
+      refs.current.disableAnimation = disableAnimation
+      refs.current.onTransition = onTransition
 
       // detect transition into exiting state
       const justStartedExiting = isExiting && !refs.current.wasExiting
@@ -242,6 +280,7 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
       if (justStartedExiting || justStoppedExiting) {
         refs.current.frozenExitTarget = null
         refs.current.exitCompleteScheduled = false
+        refs.current.enterCompleteScheduled = false
       }
 
       // track previous exiting state
@@ -249,6 +288,14 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
         refs.current.wasExiting = isExiting
       })
 
+      // exit interrupted by a re-enter: emit a finished:false end for it
+      useIsomorphicLayoutEffect(() => {
+        if (justStoppedExiting && refs.current.exitStarted) {
+          refs.current.exitStarted = false
+          emit('end', 'exit', false)
+        }
+      }, [justStoppedExiting])
+
       const {
         dontAnimate = {},
         doAnimate,
@@ -285,6 +332,7 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
         // read current state from refs (closure variables can be stale)
         const isCurrentlyExiting = refs.current.isExiting
         const currentSendExitComplete = refs.current.sendExitComplete
+        const currentAnimationState = refs.current.animationState
 
         // freeze exit target: once the first exit animation starts, subsequent
         // renders (e.g. direction change) should not reverse the exit animation.
@@ -345,10 +393,10 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
               removeRemovedStyles(prevDont, dontAnimate, node, doAnimate)
               const changed = getDiff(prevDont, dontAnimate)
               if (changed) {
-                Object.assign(node.style, changed as any)
+                assignInlineStyles(node, changed)
               }
             } else {
-              Object.assign(node.style, dontAnimate as any)
+              assignInlineStyles(node, dontAnimate)
             }
           }
 
@@ -358,7 +406,7 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
             if (prevDont) {
               for (const key in prevDont) {
                 if (key in doAnimate) {
-                  node.style[key] = prevDont[key]
+                  node.style[key] = normalizeValueWithProperty(prevDont[key], key)
                   if (refs.current.lastDoAnimate) {
                     refs.current.lastDoAnimate[key] = prevDont[key]
                   }
@@ -562,7 +610,14 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
               // PopoverClickDuringEnter / AnimatePresenceEnterExit.
               // the motion-value spring owns transform — keep it out of the
               // WAAPI animation so the two don't double-drive the property
-              let waapiDiff = fixedDiff
+              let waapiDiff = Object.fromEntries(
+                Object.entries(fixedDiff).map(([key, value]) => [
+                  key,
+                  Array.isArray(value)
+                    ? value.map((item) => normalizeValueWithProperty(item, key))
+                    : normalizeValueWithProperty(value, key),
+                ])
+              )
               if (popperHandledTransform && 'transform' in waapiDiff) {
                 waapiDiff = { ...waapiDiff }
                 delete waapiDiff.transform
@@ -577,7 +632,11 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
               }
 
               if (Object.keys(waapiDiff).length > 0) {
-                startedControls = animate(scope.current, waapiDiff, animationOptions)
+                startedControls = animateMotionValue(
+                  node,
+                  waapiDiff,
+                  animationOptions
+                ) as AnimationPlaybackControlsWithThen
                 refs.current.controls = startedControls
               }
               refs.current.lastAnimateAt = Date.now()
@@ -589,30 +648,91 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
         } finally {
           // exit completion: notify AnimatePresence when exit animation finishes
           if (isCurrentlyExiting && currentSendExitComplete) {
+            // an enter animation that was still in flight is now interrupted
+            if (refs.current.enterStarted) {
+              refs.current.enterStarted = false
+              emit('end', 'enter', false)
+            }
             if (startedControls) {
               // new animation started — attach completion handler
+              if (!refs.current.exitStarted) {
+                refs.current.exitStarted = true
+                emit('start', 'exit')
+              }
               refs.current.exitCompleteScheduled = true
+              const complete = (finished: boolean) => {
+                // guard: only complete if still exiting (prevents stale promise
+                // from calling sendExitComplete after a re-entry cancels the exit)
+                if (!refs.current.isExiting) return
+                if (refs.current.exitStarted) {
+                  refs.current.exitStarted = false
+                  // exit 'end' fires immediately before presence safeToRemove
+                  emit('end', 'exit', finished)
+                }
+                currentSendExitComplete()
+              }
               startedControls.finished
-                .then(() => {
-                  // guard: only complete if still exiting (prevents stale promise
-                  // from calling sendExitComplete after a re-entry cancels the exit)
-                  if (refs.current.isExiting) {
-                    currentSendExitComplete()
-                  }
-                })
-                .catch(() => {
-                  if (refs.current.isExiting) {
-                    currentSendExitComplete()
-                  }
-                })
+                .then(() => complete(true))
+                .catch(() => complete(false))
             } else if (!refs.current.exitCompleteScheduled) {
               // no animation started AND none previously scheduled (e.g. diff=null
               // on re-render mid-exit because frozenExitTarget matches lastDoAnimate)
               // — complete immediately only if we've never started an exit animation
+              emit('start', 'exit')
+              emit('end', 'exit', true)
               currentSendExitComplete()
             }
             // else: exit animation already scheduled via a previous flush,
             // its .finished promise will call sendExitComplete when done
+          } else if (currentAnimationState === 'enter') {
+            if (startedControls) {
+              if (!refs.current.enterStarted) {
+                refs.current.enterStarted = true
+                emit('start', 'enter')
+              }
+              refs.current.enterCompleteScheduled = true
+              const complete = (finished: boolean) => {
+                if (refs.current.disposed || refs.current.animationState !== 'enter')
+                  return
+                if (refs.current.enterStarted) {
+                  refs.current.enterStarted = false
+                  emit('end', 'enter', finished)
+                }
+              }
+              startedControls.finished
+                .then(() => complete(true))
+                .catch(() => complete(false))
+            } else if (
+              !refs.current.enterCompleteScheduled &&
+              !refs.current.disableAnimation
+            ) {
+              // no animation needed for this enter (no style diff) — complete
+              // immediately. skipped while animation is disabled (mount flushes
+              // apply enter styles without animating; completing there would
+              // report enter done before the real transition even starts)
+              emit('start', 'enter')
+              emit('end', 'enter', true)
+            }
+          } else if (startedControls) {
+            // update: a style change while mounted. a new update that supersedes
+            // an in-flight one closes it out as finished:false (motion silently
+            // replaces the conflicting property animation without settling the
+            // old controls, so we can't rely on its promise for the interrupted
+            // one). the latest controls reports true on natural completion.
+            const controls = startedControls
+            if (refs.current.updateInFlight) {
+              emit('end', 'update', false)
+            }
+            refs.current.updateInFlight = true
+            refs.current.updateControls = controls
+            emit('start', 'update')
+            const settle = (finished: boolean) => {
+              if (refs.current.updateControls !== controls) return
+              refs.current.updateInFlight = false
+              refs.current.updateControls = null
+              emit('end', 'update', finished)
+            }
+            controls.finished.then(() => settle(true)).catch(() => settle(false))
           }
         }
       }
@@ -681,8 +801,8 @@ export function createAnimations<A extends Record<string, AnimationConfig>>(
         if ((justEnabled || justStrippedClasses) && animationState !== 'enter') {
           const node = stateRef.current.host
           if (node instanceof HTMLElement) {
-            if (dontAnimate) Object.assign(node.style, dontAnimate)
-            if (doAnimate) Object.assign(node.style, doAnimate)
+            if (dontAnimate) assignInlineStyles(node, dontAnimate)
+            if (doAnimate) assignInlineStyles(node, doAnimate)
             // keep the popper position motion values in sync with the direct
             // inline write so a later retarget doesn't start from a stale spot
             const entry = PopperPositionAnims.get(node)
@@ -1028,13 +1148,103 @@ export const disableAnimationProps: Set<string> = new Set<string>([
   'userSelect',
 ])
 
+// props equality for the getSplitStyles memo: functions and children can't
+// affect style output (they pass through), so they don't participate
+function motionPropsEqual(a: Record<string, any>, b: Record<string, any>) {
+  for (const key in a) {
+    if (!(key in b)) return false
+  }
+  for (const key in b) {
+    if (key === 'children') continue
+    const av = a[key]
+    const bv = b[key]
+    if (typeof bv === 'function' && typeof av === 'function') continue
+    if (!Object.is(av, bv)) return false
+  }
+  return true
+}
+
+// one-level style object comparison: style arrays are recreated per render
+// with usually-identical contents
+function motionStylesEqual(a: any[], b: any[]) {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) {
+    const sa = a[i]
+    const sb = b[i]
+    if (sa === sb) continue
+    if (!sa || !sb) return false
+    let aCount = 0
+    for (const key in sa) {
+      aCount++
+      if (!Object.is(sa[key], sb[key])) return false
+    }
+    let bCount = 0
+    for (const _key in sb) {
+      bCount++
+    }
+    if (aCount !== bCount) return false
+  }
+  return true
+}
+
 const MotionView = createMotionView('div')
 const MotionText = createMotionView('span')
 
+const transformAliases: Record<string, string> = {
+  x: 'translateX',
+  y: 'translateY',
+  scale: 'scale',
+  scaleX: 'scaleX',
+  scaleY: 'scaleY',
+  rotate: 'rotate',
+  rotateX: 'rotateX',
+  rotateY: 'rotateY',
+  rotateZ: 'rotateZ',
+  skewX: 'skewX',
+  skewY: 'skewY',
+}
+
+function compileAnimatedStyle(
+  initialSource: Record<string, unknown>,
+  initialResolved: Record<string, unknown>
+) {
+  const shorthands = getConfig().shorthands
+  const entries = Object.keys(initialSource).map((source) => ({
+    source,
+    target: shorthands?.[source] ?? source,
+    tokenValue:
+      typeof initialSource[source] === 'string' &&
+      initialResolved[shorthands?.[source] ?? source] !== initialSource[source]
+        ? initialResolved[shorthands?.[source] ?? source]
+        : undefined,
+  }))
+
+  return (sourceStyle: Record<string, unknown>) => {
+    const resolved: Record<string, unknown> = {}
+    const transforms: Record<string, unknown>[] = []
+
+    for (const entry of entries) {
+      const value = sourceStyle[entry.source]
+      if (value === undefined) continue
+      if (entry.source === 'transform' && Array.isArray(value)) {
+        resolved.transform = transformsToString(value)
+      } else if (entry.source in transformAliases) {
+        transforms.push({ [transformAliases[entry.source]]: value })
+      } else {
+        resolved[entry.target] =
+          entry.tokenValue ?? normalizeValueWithProperty(value, entry.target)
+      }
+    }
+
+    if (transforms.length) resolved.transform = transformsToString(transforms)
+    return resolved
+  }
+}
+
 function createMotionView(defaultTag: string) {
   const isText = defaultTag === 'span'
 
-  const Component = forwardRef((propsIn: any, ref) => {
+  const Component = createRefComponent((propsIn: any, ref) => {
     const { forwardedRef, animation, render = defaultTag, style, ...propsRest } = propsIn
     const [scope, animate] = useAnimateSSRSafe()
     const hostRef = useRef<HTMLElement>(null)
@@ -1070,6 +1280,13 @@ function createMotionView(defaultTag: string) {
     })()
 
     function getProps(props: any) {
+      if (
+        process.env.NODE_ENV === 'development' &&
+        propsIn.debug === 'profile' &&
+        typeof performance !== 'undefined'
+      ) {
+        performance.mark('tamagui-motion-style-split')
+      }
       const out = getSplitStyles(
         props,
         isText ? Text.staticConfig : View.staticConfig,
@@ -1097,12 +1314,76 @@ function createMotionView(defaultTag: string) {
       return out.viewProps
     }
 
-    const props = getProps({ ...propsRest, style: nonAnimatedStyles })
+    const resolvedAnimatedStyle = useMemo(() => {
+      if (!animatedStyle) return null
+      const currentValues = animatedStyle.motionValues
+        ? animatedStyle.motionValues.map((value) => value.get())
+        : animatedStyle.motionValue
+          ? [animatedStyle.motionValue.get()]
+          : []
+      const initialSource = animatedStyle.getStyle(...currentValues)
+      const initialResolved = asStyleRecord(getProps({ style: initialSource }).style)
+      return {
+        initial: initialResolved,
+        resolve: compileAnimatedStyle(initialSource, initialResolved),
+      }
+    }, [animatedStyle, state?.theme, state?.name])
+
+    // memoize the full getSplitStyles pass: it costs ~90us per render and its
+    // style-affecting inputs are usually unchanged. functions and children
+    // pass through getSplitStyles untouched, so they refresh on cache hits
+    // without invalidating.
+    const memoRef = useRef<null | {
+      propsRest: any
+      styles: any[]
+      theme: any
+      themeName: string | undefined
+      result: any
+    }>(null)
+
+    let props: any
+    const cached = memoRef.current
+    if (
+      cached &&
+      cached.theme === state?.theme &&
+      cached.themeName === state?.name &&
+      motionStylesEqual(cached.styles, nonAnimatedStyles) &&
+      motionPropsEqual(cached.propsRest, propsRest)
+    ) {
+      props = { ...cached.result }
+      for (const key in propsRest) {
+        const val = propsRest[key]
+        if (key === 'children' || typeof val === 'function') {
+          props[key] = val
+        }
+      }
+    } else {
+      props = getProps({ ...propsRest, style: nonAnimatedStyles })
+      memoRef.current = {
+        propsRest,
+        styles: nonAnimatedStyles,
+        theme: state?.theme,
+        themeName: state?.name,
+        result: props,
+      }
+    }
+
+    if (resolvedAnimatedStyle) {
+      // reassign so the animated initial never leaks into the memo cache
+      props = {
+        ...props,
+        style: {
+          ...asStyleRecord(props.style),
+          ...resolvedAnimatedStyle.initial,
+        },
+      }
+    }
+
     const Element = render || 'div'
     const transformedProps = hooks.usePropsTransform?.(render, props, stateRef, false)
 
-    // consumers set animated numbers from layout effects, so subscribe before
-    // passive effects to avoid missing a value set in the mounting commit.
+    // subscribe before passive effects so a layout effect cannot set a value
+    // between this node mounting and its MotionValue subscription.
     useIsomorphicLayoutEffect(() => {
       if (!animatedStyle) return
 
@@ -1115,15 +1396,13 @@ function createMotionView(defaultTag: string) {
           : animatedStyle.motionValue
             ? animatedStyle.getStyle(animatedStyle.motionValue.get())
             : null
-        const webStyle = currentStyle && getProps({ style: currentStyle }).style
+        const webStyle = currentStyle && resolvedAnimatedStyle?.resolve(currentStyle)
         if (webStyle) {
-          Object.assign(node.style, webStyle)
+          assignInlineStyles(node, webStyle)
           seededNode.current = node
           seededInCurrentFrame.current = true
           requestAnimationFrame(() => {
-            if (seededNode.current === node) {
-              seededInCurrentFrame.current = false
-            }
+            if (seededNode.current === node) seededInCurrentFrame.current = false
           })
         }
       }
@@ -1132,7 +1411,7 @@ function createMotionView(defaultTag: string) {
         animationConfig: AnimatedNumberStrategy | undefined
       ): AnimationOptions =>
         animationConfig?.type === 'timing'
-          ? { type: 'tween', duration: (animationConfig?.duration || 0) / 1000 }
+          ? { type: 'tween', duration: (animationConfig.duration || 0) / 1000 }
           : animationConfig?.type === 'direct'
             ? { type: 'tween', duration: 0 }
             : { type: 'spring', ...(animationConfig as any) }
@@ -1140,44 +1419,47 @@ function createMotionView(defaultTag: string) {
       const animateNodeTo = (
         nextStyle: Record<string, unknown>,
         transition: AnimationOptions,
-        mv: MotionValue
+        motionValue: MotionValue
       ) => {
         if (!(node instanceof HTMLElement) || hostRef.current !== node) return
-        const webStyle = getProps({ style: nextStyle }).style
+        const webStyle = resolvedAnimatedStyle?.resolve(nextStyle)
         if (!webStyle) return
-        settlePendingMotionOnFinish(mv, animate(node, webStyle as any, transition))
+        settlePendingMotionOnFinish(
+          motionValue,
+          animate(node, webStyle as any, transition)
+        )
       }
+
       const animateChangedValue = (
         nextStyle: Record<string, unknown>,
         transition: AnimationOptions,
-        mv: MotionValue
+        motionValue: MotionValue
       ) => {
         if (seededInCurrentFrame.current && seededNode.current === node) {
-          const queuedFrame = queuedAnimationFrames.current.get(mv)
-          if (queuedFrame !== undefined) {
-            cancelAnimationFrame(queuedFrame)
-          }
+          const queuedFrame = queuedAnimationFrames.current.get(motionValue)
+          if (queuedFrame !== undefined) cancelAnimationFrame(queuedFrame)
           const frame = requestAnimationFrame(() => {
-            if (queuedAnimationFrames.current.get(mv) !== frame) return
-            queuedAnimationFrames.current.delete(mv)
+            if (queuedAnimationFrames.current.get(motionValue) !== frame) return
+            queuedAnimationFrames.current.delete(motionValue)
             if (hostRef.current === node) {
-              animateNodeTo(nextStyle, transition, mv)
+              animateNodeTo(nextStyle, transition, motionValue)
             } else {
-              const onFinish = PendingMotionOnFinish.get(mv)
-              PendingMotionOnFinish.delete(mv)
+              const onFinish = PendingMotionOnFinish.get(motionValue)
+              PendingMotionOnFinish.delete(motionValue)
               onFinish?.()
             }
           })
-          queuedAnimationFrames.current.set(mv, frame)
+          queuedAnimationFrames.current.set(motionValue, frame)
           return
         }
-        animateNodeTo(nextStyle, transition, mv)
+        animateNodeTo(nextStyle, transition, motionValue)
       }
 
       // multi-value path: subscribe to all motion values
       if (animatedStyle.motionValues) {
         const mvs = animatedStyle.motionValues
-        const styleForAll = () => animatedStyle.getStyle(...mvs.map((v) => v.get()))
+        const styleForAll = () =>
+          animatedStyle.getStyle(...mvs.map((value) => value.get()))
         const unsubs = mvs.map((mv) =>
           mv.on('change', () =>
             animateChangedValue(
@@ -1201,7 +1483,7 @@ function createMotionView(defaultTag: string) {
           motionValue
         )
       )
-    }, [animatedStyle])
+    }, [animatedStyle, resolvedAnimatedStyle])
 
     return <Element {...transformedProps} ref={composedRefs} />
   })

package/src/index.native.ts

@@ -1,13 +1,13 @@
 // native stub - animations-motion only works on web (uses framer-motion/motion library)
 // on native, use @tamagui/animations-react-native or @tamagui/animations-reanimated
 
-import type { AnimationDriver } from '@tamagui/web'
+import type { AnimationDriverStub } from '@tamagui/web'
 
 let hasWarnedOnce = false
 
 export function createAnimations<A extends Record<string, any>>(
   _animations: A
-): AnimationDriver<A> {
+): AnimationDriverStub<A> {
   if (process.env.NODE_ENV === 'development') {
     if (!hasWarnedOnce) {
       hasWarnedOnce = true
@@ -17,10 +17,10 @@ export function createAnimations<A extends Record<string, any>>(
     }
   }
 
-  // return a noop driver
-  // @ts-expect-error its an error anyway
+  // return an explicit unsupported driver so config resolution can skip it
   return {
     isReactNative: false,
+    isStub: true,
     animations: _animations,
     View: undefined as any,
     Text: undefined as any,