@tamagui/animations-reanimated 2.4.5 → 2.5.0

package/dist/esm/createAnimations.mjs

@@ -1,6 +1,7 @@
 import { getEffectiveAnimation, normalizeTransition } from "@tamagui/animation-helpers";
 import { getSplitStyles, hooks, isWeb, Text, useComposedRefs, useEvent, useIsomorphicLayoutEffect, useThemeWithState, View } from "@tamagui/core";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
+import normalizeColor from "@react-native/normalize-colors";
 import React, { forwardRef, useMemo, useRef } from "react";
 import Animated_, { cancelAnimation, runOnJS, runOnUI, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withDelay, withSpring, withTiming } from "react-native-reanimated";
 import { jsx } from "react/jsx-runtime";
@@ -42,9 +43,162 @@ const cloneAnimationValue = value => {
   }
   return value;
 };
+const cloneStyleRecord = style => {
+  const next = {};
+  for (const key in style) {
+    next[key] = cloneAnimationValue(style[key]);
+  }
+  return next;
+};
 const cloneTransitionConfig = config => {
   return cloneAnimationValue(config);
 };
+const getAnimatedTransforms = value => {
+  if (!Array.isArray(value)) return [];
+  return value.filter(item => item !== null && typeof item === "object" && !Array.isArray(item));
+};
+const getRemovedAnimatedKeys = (current, previous) => {
+  const removedKeys = {};
+  for (const key of previous) {
+    if (!current.has(key)) removedKeys[key] = true;
+  }
+  return removedKeys;
+};
+const getImplicitDefault = (key, targetValue) => {
+  "worklet";
+
+  const value = key === "opacity" || key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
+  if (typeof targetValue !== "string") return value;
+  let suffixIndex = 0;
+  while (suffixIndex < targetValue.length) {
+    const character = targetValue[suffixIndex];
+    const code = character.charCodeAt(0);
+    if (code >= 48 && code <= 57 || character === "." || character === "-" || character === "+") {
+      suffixIndex++;
+    } else {
+      break;
+    }
+  }
+  return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
+};
+const COLOR_STYLE_KEYS = {
+  backgroundColor: true,
+  borderColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderTopColor: true,
+  borderBottomColor: true,
+  color: true
+};
+const toReanimatedColor = value => {
+  "worklet";
+
+  if (typeof value === "number") {
+    const color = value >>> 0;
+    const alpha = (color >>> 24 & 255) / 255;
+    const red = color >>> 16 & 255;
+    const green = color >>> 8 & 255;
+    const blue = color & 255;
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  }
+  if (typeof value !== "string") return value;
+  const trimmed = value.trim();
+  if (trimmed === "transparent") return "rgba(0, 0, 0, 0)";
+  return trimmed;
+};
+const isReanimatedColorHistory = value => {
+  "worklet";
+
+  const normalized = toReanimatedColor(value);
+  return typeof normalized === "string" && normalized.startsWith("rgba(");
+};
+const normalizeAnimationColor = value => {
+  if (typeof value === "number") {
+    return toReanimatedColor(value);
+  }
+  if (typeof value !== "string") return;
+  const color = normalizeColor(value);
+  if (color == null) return;
+  const red = Math.round((color & 4278190080) >>> 24);
+  const green = Math.round((color & 16711680) >>> 16);
+  const blue = Math.round((color & 65280) >>> 8);
+  const alpha = (color & 255) / 255;
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted) => {
+  const snapshotAnimated = {};
+  const snapshotStatics = cloneStyleRecord(statics);
+  for (const key in snapshotStatics) {
+    if (!COLOR_STYLE_KEYS[key]) continue;
+    const normalized = normalizeAnimationColor(snapshotStatics[key]);
+    if (normalized !== void 0) snapshotStatics[key] = normalized;
+  }
+  for (const key in animated) {
+    if (key === "transform") continue;
+    const value = animated[key];
+    if (COLOR_STYLE_KEYS[key]) {
+      const normalized = normalizeAnimationColor(value);
+      if (normalized === void 0) {
+        snapshotStatics[key] = cloneAnimationValue(value);
+        continue;
+      }
+      snapshotAnimated[key] = normalized;
+    } else {
+      snapshotAnimated[key] = cloneAnimationValue(value);
+    }
+  }
+  const snapshotTransforms = transforms.map(cloneStyleRecord);
+  const keys = new Set(Object.keys(snapshotAnimated));
+  for (const transform of snapshotTransforms) {
+    const key = Object.keys(transform)[0];
+    const value = key ? transform[key] : void 0;
+    if (key && (typeof value === "number" || typeof value === "string")) {
+      keys.add(`transform:${key}`);
+    }
+  }
+  const seeds = {};
+  for (const key of keys) {
+    let value = lastPainted[key];
+    if (typeof value !== "number" && typeof value !== "string") continue;
+    if (value === "auto" || typeof value === "string" && value.startsWith("calc")) {
+      continue;
+    }
+    if (COLOR_STYLE_KEYS[key]) value = normalizeAnimationColor(value);
+    if (value !== void 0) seeds[key] = value;
+  }
+  const gatedKeys = {};
+  for (const key of keys) gatedKeys[key] = true;
+  const removedKeys = getRemovedAnimatedKeys(keys, previousKeys);
+  const painted = {
+    ...snapshotStatics,
+    ...snapshotAnimated
+  };
+  const staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
+  delete painted.transform;
+  for (const transform of staticTransforms) {
+    const key = Object.keys(transform)[0];
+    if (key) painted[`transform:${key}`] = transform[key];
+  }
+  for (const transform of snapshotTransforms) {
+    const key = Object.keys(transform)[0];
+    if (key) painted[`transform:${key}`] = transform[key];
+  }
+  return {
+    value: {
+      animated: snapshotAnimated,
+      statics: snapshotStatics,
+      transforms: snapshotTransforms,
+      gatedKeys,
+      seeds,
+      removedKeys,
+      removeTransform: Object.keys(removedKeys).some(key => key.startsWith("transform:")),
+      clearValue: isWeb ? "" : null
+    },
+    painted,
+    keys
+  };
+};
+const getGatedKeys = snapshot => Object.keys(snapshot.gatedKeys);
 const createReanimatedConfig = config => {
   "worklet";
 
@@ -59,7 +213,7 @@ const createReanimatedConfig = config => {
   }
   return next;
 };
-const applyAnimation = (targetValue, config, callback) => {
+const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false) => {
   "worklet";
 
   const delay = config.delay;
@@ -70,11 +224,43 @@ const applyAnimation = (targetValue, config, callback) => {
   } else {
     animatedValue = withSpring(targetValue, reanimatedConfig, callback);
   }
+  if (seedValue !== void 0 || validateStartAsColor) {
+    const innerOnStart = animatedValue.onStart;
+    animatedValue.onStart = (animation, value, timestamp, previousAnimation) => {
+      "worklet";
+
+      const startValue = validateStartAsColor ? isReanimatedColorHistory(value) ? toReanimatedColor(value) : seedValue ?? targetValue : seedValue;
+      innerOnStart(animation, startValue, timestamp, previousAnimation);
+    };
+  }
   if (delay && delay > 0) {
     animatedValue = withDelay(delay, animatedValue);
   }
   return animatedValue;
 };
+const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingAnimation, didAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, validateStartAsColor = false) => {
+  "worklet";
+
+  const cycleGated = gated && (currentlyExiting || currentlyCompletingAnimation);
+  if (!previouslyEmitted && seedValue === void 0 && !cycleGated) {
+    return targetValue;
+  }
+  let callback;
+  if (gated && currentlyExiting) {
+    callback = finished => {
+      "worklet";
+
+      runOnJS(markExitKeyDone)(key, exitCycleId, finished ?? false);
+    };
+  } else if (gated && currentlyCompletingAnimation) {
+    callback = finished => {
+      "worklet";
+
+      runOnJS(markDidAnimateKeyDone)(key, didAnimateCycleId, finished ?? false);
+    };
+  }
+  return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue ?? getImplicitDefault(implicitKey, targetValue), validateStartAsColor);
+};
 const ANIMATABLE_PROPERTIES = {
   // Transform
   transform: true,
@@ -149,6 +335,23 @@ const canAnimateProperty = (key, value, animateOnly) => {
   if (animateOnly && !animateOnly.includes(key)) return false;
   return true;
 };
+const splitAnimationStyles = (style, isDark, disableAnimation, animateOnly) => {
+  const animated = {};
+  const statics = {};
+  for (const key in style) {
+    const value = resolveDynamicValue(style[key], isDark);
+    if (value === void 0) continue;
+    if (!disableAnimation && canAnimateProperty(key, value, animateOnly)) {
+      animated[key] = cloneAnimationValue(value);
+    } else {
+      statics[key] = cloneAnimationValue(value);
+    }
+  }
+  return {
+    animated,
+    statics
+  };
+};
 function createWebAnimatedComponent(defaultTag) {
   const isText = defaultTag === "span";
   const Component = Animated.createAnimatedComponent(forwardRef((propsIn, ref) => {
@@ -369,7 +572,8 @@ function createAnimations(animationsConfig) {
         useStyleEmitter,
         themeName,
         stateRef,
-        styleState
+        styleState,
+        onDidAnimate
       } = animationProps;
       const isHydrating = componentState.unmounted === true;
       const isMounting = componentState.unmounted === "should-enter";
@@ -387,6 +591,25 @@ function createAnimations(animationsConfig) {
       const disableAnimation = isHydrating || !animationKey;
       const isDark = themeName?.startsWith("dark") || false;
       const sendExitComplete = presence?.[1];
+      const onDidAnimateRef = useRef(onDidAnimate);
+      useIsomorphicLayoutEffect(() => {
+        onDidAnimateRef.current = onDidAnimate;
+      }, [onDidAnimate]);
+      const didAnimateCycleIdRef = useRef(0);
+      const pendingDidAnimateKeysRef = useRef(/* @__PURE__ */new Set());
+      const didAnimateCompletedRef = useRef(false);
+      const isCompletingAnimationRef = useSharedValue(false);
+      const didAnimateCycleIdShared = useSharedValue(0);
+      const markDidAnimateKeyDone = useEvent((key, cycleId, finished) => {
+        if (!finished || cycleId !== didAnimateCycleIdRef.current) return;
+        if (didAnimateCompletedRef.current) return;
+        pendingDidAnimateKeysRef.current.delete(key);
+        if (pendingDidAnimateKeysRef.current.size === 0) {
+          didAnimateCompletedRef.current = true;
+          isCompletingAnimationRef.value = false;
+          onDidAnimateRef.current?.();
+        }
+      });
       const exitCycleIdRef = useRef(0);
       const pendingExitKeysRef = useRef(/* @__PURE__ */new Set());
       const exitCompletedRef = useRef(false);
@@ -408,6 +631,9 @@ function createAnimations(animationsConfig) {
         exitCycleIdRef.current++;
         exitCompletedRef.current = false;
         pendingExitKeysRef.current.clear();
+        didAnimateCycleIdRef.current++;
+        pendingDidAnimateKeysRef.current.clear();
+        didAnimateCompletedRef.current = true;
       }
       if (justStoppedExiting) {
         exitCycleIdRef.current++;
@@ -416,52 +642,83 @@ function createAnimations(animationsConfig) {
       useIsomorphicLayoutEffect(() => {
         isExitingRef.value = isExiting;
         exitCycleIdShared.value = exitCycleIdRef.current;
-      }, [isExiting, exitCycleIdRef.current]);
+        if (justStartedExiting) {
+          isCompletingAnimationRef.value = false;
+          didAnimateCycleIdShared.value = didAnimateCycleIdRef.current;
+        }
+      }, [isExiting, exitCycleIdRef.current, justStartedExiting]);
       React.useEffect(() => {
         wasExitingRef.current = isExiting;
       });
-      const animatedTargetsRef = useSharedValue(null);
-      const staticTargetsRef = useSharedValue(null);
-      const transformTargetsRef = useSharedValue(null);
+      const committedRenderKeysRef = useRef(/* @__PURE__ */new Set());
+      const lastPaintedRef = useRef({});
+      const carryRef = useRef({});
       const {
         animatedStyles,
-        staticStyles
+        staticStyles,
+        nextCarry
       } = useMemo(() => {
-        const animated = {};
-        const staticStyles2 = {};
         const animateOnly = props.animateOnly;
-        for (const key in style) {
-          const rawValue = style[key];
-          const value = resolveDynamicValue(rawValue, isDark);
-          if (value === void 0) continue;
-          if (disableAnimation) {
-            staticStyles2[key] = cloneAnimationValue(value);
-            continue;
-          }
-          if (canAnimateProperty(key, value, animateOnly)) {
-            animated[key] = cloneAnimationValue(value);
-          } else {
-            staticStyles2[key] = cloneAnimationValue(value);
-          }
+        const {
+          animated,
+          statics
+        } = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
+        const nextCarry2 = cloneStyleRecord(carryRef.current);
+        for (const key in nextCarry2) {
+          if (!(key in animated)) delete nextCarry2[key];
         }
-        if (isMounting) {
-          for (const key in animated) {
-            staticStyles2[key] = animated[key];
+        for (const key in animated) {
+          if (!(key in nextCarry2)) {
+            nextCarry2[key] = cloneAnimationValue(animated[key]);
           }
+          statics[key] = nextCarry2[key];
         }
         return {
           animatedStyles: animated,
-          staticStyles: staticStyles2
+          staticStyles: statics,
+          nextCarry: nextCarry2
         };
-      }, [disableAnimation, style, isDark, isMounting, props.animateOnly]);
+      }, [disableAnimation, style, isDark, props.animateOnly]);
+      const renderSnapshot = useMemo(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
+      const renderSnapshotRef = useSharedValue({
+        animated: {},
+        statics: {},
+        transforms: [],
+        gatedKeys: {},
+        seeds: {},
+        removedKeys: {},
+        removeTransform: false,
+        clearValue: isWeb ? "" : null
+      });
+      const emitterSnapshotRef = useSharedValue(null);
+      const emitterKeysRef = useRef(null);
+      useIsomorphicLayoutEffect(() => {
+        carryRef.current = nextCarry;
+        committedRenderKeysRef.current = renderSnapshot.keys;
+        lastPaintedRef.current = renderSnapshot.painted;
+      }, [nextCarry, renderSnapshot]);
       const pseudoActiveRef = useRef(false);
       const isExitingJSRef = useRef(false);
       isExitingJSRef.current = isExiting;
+      const publishedSnapshotRef = useRef(null);
       useIsomorphicLayoutEffect(() => {
-        if ((isExiting || !pseudoActiveRef.current) && animatedTargetsRef.value !== null) {
-          animatedTargetsRef.value = null;
-          staticTargetsRef.value = null;
-          transformTargetsRef.value = null;
+        const droppingLatch = (isExiting || !pseudoActiveRef.current) && emitterSnapshotRef.value !== null;
+        const emitterKeys = droppingLatch ? emitterKeysRef.current : null;
+        if (droppingLatch || publishedSnapshotRef.current !== renderSnapshot.value) {
+          const removedKeys = emitterKeys ? {
+            ...renderSnapshot.value.removedKeys,
+            ...getRemovedAnimatedKeys(renderSnapshot.keys, emitterKeys)
+          } : renderSnapshot.value.removedKeys;
+          renderSnapshotRef.value = {
+            ...renderSnapshot.value,
+            removedKeys,
+            removeTransform: Object.keys(removedKeys).some(key => key.startsWith("transform:"))
+          };
+          publishedSnapshotRef.current = renderSnapshot.value;
+        }
+        if (droppingLatch) {
+          emitterSnapshotRef.value = null;
+          emitterKeysRef.current = null;
         }
       });
       const {
@@ -497,9 +754,6 @@ function createAnimations(animationsConfig) {
         if (isExitingJSRef.current) return;
         pseudoActiveRef.current = pseudoActive === true;
         const animateOnly = props.animateOnly;
-        const animated = {};
-        const statics = {};
-        const transforms = [];
         const transitionToUse = effectiveTransition2 ?? props.transition;
         const {
           baseConfig: newBase,
@@ -511,69 +765,52 @@ function createAnimations(animationsConfig) {
           disableAnimation: configRef.value.disableAnimation,
           isHydrating: configRef.value.isHydrating
         };
-        for (const key in nextStyle) {
-          const rawValue = nextStyle[key];
-          const value = resolveDynamicValue(rawValue, isDark);
-          if (value == void 0) continue;
-          if (configRef.value.disableAnimation) {
-            statics[key] = cloneAnimationValue(value);
-            continue;
-          }
-          if (key === "transform" && Array.isArray(value)) {
-            for (const t of value) {
-              if (t && typeof t === "object") {
-                const tKey = Object.keys(t)[0];
-                const tVal = t[tKey];
-                if (typeof tVal === "number" || typeof tVal === "string") {
-                  transforms.push(cloneAnimationValue(t));
-                }
-              }
-            }
-            continue;
-          }
-          if (canAnimateProperty(key, value, animateOnly)) {
-            animated[key] = cloneAnimationValue(value);
-          } else {
-            statics[key] = cloneAnimationValue(value);
-          }
-        }
-        animatedTargetsRef.value = animated;
-        staticTargetsRef.value = statics;
-        transformTargetsRef.value = transforms;
+        const previousKeys = emitterKeysRef.current ?? committedRenderKeysRef.current;
+        const {
+          animated,
+          statics
+        } = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation, animateOnly);
+        const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
+        emitterSnapshotRef.value = snapshot.value;
+        emitterKeysRef.current = snapshot.keys;
+        lastPaintedRef.current = snapshot.painted;
         if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
           console.info("[animations-reanimated] useStyleEmitter update", {
             animated,
             statics,
-            transforms
+            transforms: snapshot.value.transforms
           });
         }
       });
       const exitKeysRegistered = useRef(false);
       if (justStartedExiting && sendExitComplete) {
-        const exitKeys = [];
-        const animateOnly = props.animateOnly;
-        for (const key in animatedStyles) {
-          if (key === "transform") continue;
-          if (canAnimateProperty(key, animatedStyles[key], animateOnly)) {
-            exitKeys.push(key);
-          }
-        }
-        const transforms = animatedStyles.transform;
-        if (transforms && Array.isArray(transforms)) {
-          for (const t of transforms) {
-            if (!t) continue;
-            const tKey = Object.keys(t)[0];
-            if (tKey) {
-              if (animateOnly && !animateOnly.includes(tKey)) {
-                continue;
-              }
-              exitKeys.push(`transform:${tKey}`);
-            }
-          }
-        }
+        const exitKeys = getGatedKeys(renderSnapshot.value);
         pendingExitKeysRef.current = new Set(exitKeys);
         exitKeysRegistered.current = exitKeys.length > 0;
       }
+      const previousDidAnimateStyleRef = useRef(null);
+      const didAnimateStyle = onDidAnimate ? JSON.stringify(style) : null;
+      const previousDidAnimateStyle = previousDidAnimateStyleRef.current;
+      const shouldRegisterDidAnimate = didAnimateStyle !== null && previousDidAnimateStyle !== null && previousDidAnimateStyle !== didAnimateStyle && !isExiting && !isEntering && !justFinishedEntering;
+      const didAnimateKeys = shouldRegisterDidAnimate ? getGatedKeys(renderSnapshot.value) : [];
+      useIsomorphicLayoutEffect(() => {
+        if (didAnimateStyle === null) {
+          previousDidAnimateStyleRef.current = null;
+          isCompletingAnimationRef.value = false;
+          return;
+        }
+        const previousStyleStillCurrent = previousDidAnimateStyleRef.current === previousDidAnimateStyle;
+        previousDidAnimateStyleRef.current = didAnimateStyle;
+        if (!shouldRegisterDidAnimate || !previousStyleStillCurrent) return;
+        const cycleId = ++didAnimateCycleIdRef.current;
+        pendingDidAnimateKeysRef.current = new Set(didAnimateKeys);
+        didAnimateCompletedRef.current = didAnimateKeys.length === 0;
+        isCompletingAnimationRef.value = didAnimateKeys.length > 0;
+        didAnimateCycleIdShared.value = cycleId;
+        if (didAnimateKeys.length === 0) {
+          onDidAnimateRef.current?.();
+        }
+      }, [didAnimateStyle, shouldRegisterDidAnimate]);
       React.useEffect(() => {
         if (!justStartedExiting || !sendExitComplete) return;
         if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
@@ -583,76 +820,76 @@ function createAnimations(animationsConfig) {
           }
         }
       }, [justStartedExiting, sendExitComplete]);
+      const mapperStateRef = useSharedValue({
+        emitted: {}
+      });
       const animatedStyle = useAnimatedStyle(() => {
         "worklet";
 
-        if (disableAnimation || isHydrating) {
+        const mapperState = mapperStateRef.value;
+        const config = configRef.value;
+        if (config.disableAnimation || config.isHydrating) {
+          mapperState.emitted = {};
           return {};
         }
+        const previouslyEmitted = mapperState.emitted;
+        const emitted = {};
         const result = {};
-        const config = configRef.value;
-        const emitterAnimated = animatedTargetsRef.value;
-        const emitterStatic = staticTargetsRef.value;
-        const emitterTransforms = transformTargetsRef.value;
-        const hasEmitterUpdates = emitterAnimated !== null;
-        const animatedValues = hasEmitterUpdates ? emitterAnimated : animatedStyles;
-        const staticValues = hasEmitterUpdates ? emitterStatic : staticStyles;
+        const emitterSnapshot = emitterSnapshotRef.value;
+        const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
+        const animatedValues = snapshot.animated;
+        const staticValues = snapshot.statics;
         const currentlyExiting = isExitingRef.value;
         const currentCycleId = exitCycleIdShared.value;
+        const currentlyCompletingAnimation = isCompletingAnimationRef.value;
+        const currentDidAnimateCycleId = didAnimateCycleIdShared.value;
         for (const key in staticValues) {
           result[key] = staticValues[key];
         }
+        for (const key in snapshot.removedKeys) {
+          if (!key.startsWith("transform:") && !(key in staticValues)) {
+            result[key] = snapshot.clearValue;
+          }
+        }
         for (const key in animatedValues) {
           if (key === "transform") continue;
           const targetValue = animatedValues[key];
-          const propConfig = config.propertyConfigs[key] ?? config.baseConfig;
-          let callback;
-          if (currentlyExiting) {
-            const capturedKey = key;
-            const capturedCycleId = currentCycleId;
-            callback = finished => {
-              "worklet";
-
-              runOnJS(markExitKeyDone)(capturedKey, capturedCycleId, finished ?? false);
-            };
+          emitted[key] = true;
+          if (typeof targetValue !== "number" && typeof targetValue !== "string") {
+            result[key] = targetValue;
+            continue;
           }
-          result[key] = applyAnimation(targetValue, propConfig, callback);
+          result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, !!COLOR_STYLE_KEYS[key]);
         }
-        const transforms = hasEmitterUpdates ? emitterTransforms : animatedStyles.transform;
-        if (transforms && Array.isArray(transforms)) {
+        const transforms = snapshot.transforms;
+        if (transforms.length > 0 || snapshot.removeTransform) {
           const validTransforms = [];
           for (const t of transforms) {
             if (!t) continue;
             const keys = Object.keys(t);
             if (keys.length === 0) continue;
-            const value = t[keys[0]];
+            const transformKey = keys[0];
+            const value = t[transformKey];
             if (typeof value === "number" || typeof value === "string") {
-              const transformKey = Object.keys(t)[0];
-              const targetValue = t[transformKey];
               const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
-              let callback;
-              if (currentlyExiting) {
-                const capturedKey = `transform:${transformKey}`;
-                const capturedCycleId = currentCycleId;
-                callback = finished => {
-                  "worklet";
-
-                  runOnJS(markExitKeyDone)(capturedKey, capturedCycleId, finished ?? false);
-                };
-              }
+              const subKey = `transform:${transformKey}`;
+              emitted[subKey] = true;
               validTransforms.push({
-                [transformKey]: applyAnimation(targetValue, propConfig, callback)
+                [transformKey]: animateSnapshotValue(subKey, transformKey, value, propConfig, !!previouslyEmitted[subKey], snapshot.seeds[subKey], !!snapshot.gatedKeys[subKey], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone)
               });
+            } else {
+              validTransforms.push(t);
             }
           }
-          if (validTransforms.length > 0) {
+          if (validTransforms.length > 0 || !("transform" in staticValues)) {
             result.transform = validTransforms;
           }
         }
+        mapperState.emitted = emitted;
         return result;
-      }, isWeb ? [animatedStyles, staticStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating,
-      // pass SharedValues so the mapper watches them on web (no babel plugin)
-      animatedTargetsRef, staticTargetsRef, transformTargetsRef, isExitingRef, exitCycleIdShared, markExitKeyDone] : void 0);
+      }, isWeb ? [
+      // pass SharedValues so the stable mapper watches them on web (no babel plugin)
+      renderSnapshotRef, emitterSnapshotRef, configRef, isExitingRef, exitCycleIdShared, markExitKeyDone, isCompletingAnimationRef, didAnimateCycleIdShared, markDidAnimateKeyDone] : void 0);
       silenceAnimatedComponentDevCheck(animatedStyle);
       if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
         console.info("[animations-reanimated] useAnimations", {