@hanzogui/animations-reanimated 7.3.1 → 8.0.1

package/dist/esm/createAnimations.mjs

@@ -1,6 +1,7 @@
 import { getEffectiveAnimation, normalizeTransition } from "@hanzogui/animation-helpers";
 import { getSplitStyles, hooks, isWeb, Text, useComposedRefs, useEvent, useIsomorphicLayoutEffect, useThemeWithState, View } from "@hanzogui/core";
 import { ResetPresence, usePresence } from "@hanzogui/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";
@@ -12,6 +13,16 @@ const getDefaultExport = module => {
   return mod;
 };
 const Animated = getDefaultExport(Animated_);
+const silenceAnimatedComponentDevCheck = style => {
+  if (process.env.NODE_ENV !== "development" || isWeb || !style || typeof style !== "object") {
+    return;
+  }
+  Object.defineProperty(style, "_requiresAnimatedComponent", {
+    configurable: true,
+    enumerable: false,
+    value: true
+  });
+};
 const resolveDynamicValue = (value, isDark) => {
   if (value !== null && typeof value === "object" && "dynamic" in value && typeof value.dynamic === "object") {
     const dynamic = value.dynamic;
@@ -19,21 +30,248 @@ const resolveDynamicValue = (value, isDark) => {
   }
   return value;
 };
-const applyAnimation = (targetValue, config, callback) => {
+const updateMapperState = isWeb ? (state, emitted) => {
+  state.value.emitted = emitted;
+} : (state, emitted) => {
+  "worklet";
+
+  if (!globalThis._WORKLET) return;
+  state.modify(current => {
+    current.emitted = emitted;
+    return current;
+  }, false);
+};
+const cloneAnimationValue = value => {
+  if (Array.isArray(value)) {
+    return value.map(cloneAnimationValue);
+  }
+  if (value && typeof value === "object") {
+    const next = {};
+    for (const key in value) {
+      next[key] = cloneAnimationValue(value[key]);
+    }
+    return next;
+  }
+  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";
+
+  const next = {};
+  const source = config;
+  for (const key in source) {
+    if (key === "type" || key === "delay") continue;
+    const value = source[key];
+    if (value !== void 0) {
+      next[key] = value;
+    }
+  }
+  return next;
+};
+const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false) => {
   "worklet";
 
   const delay = config.delay;
+  const reanimatedConfig = createReanimatedConfig(config);
   let animatedValue;
   if (config.type === "timing") {
-    animatedValue = withTiming(targetValue, config, callback);
+    animatedValue = withTiming(targetValue, reanimatedConfig, callback);
   } else {
-    animatedValue = withSpring(targetValue, config, callback);
+    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,
@@ -108,6 +346,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) => {
@@ -146,43 +401,43 @@ const AnimatedText = createWebAnimatedComponent("span");
 function buildTransitionConfig(transition, animations, animationState, styleKeys) {
   const normalized = normalizeTransition(transition);
   const effectiveKey = getEffectiveAnimation(normalized, animationState);
-  let base = effectiveKey ? animations[effectiveKey] ?? {
+  let base = cloneTransitionConfig(effectiveKey ? animations[effectiveKey] ?? {
     type: "spring"
   } : {
     type: "spring"
-  };
+  });
   if (normalized.delay) {
-    base = {
+    base = cloneTransitionConfig({
       ...base,
       delay: normalized.delay
-    };
+    });
   }
   if (normalized.config) {
-    base = {
+    base = cloneTransitionConfig({
       ...base,
       ...normalized.config
-    };
+    });
     if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
-      base = {
+      base = cloneTransitionConfig({
         ...base,
         type: "timing"
-      };
+      });
     }
   }
   const propertyConfigs = {};
   for (const key of styleKeys) {
     const propAnimation = normalized.properties[key];
     if (typeof propAnimation === "string") {
-      propertyConfigs[key] = animations[propAnimation] ?? base;
+      propertyConfigs[key] = cloneTransitionConfig(animations[propAnimation] ?? base);
     } else if (propAnimation && typeof propAnimation === "object") {
       const configType = propAnimation.type;
       const baseForProp = configType ? animations[configType] ?? base : base;
-      propertyConfigs[key] = {
+      propertyConfigs[key] = cloneTransitionConfig({
         ...baseForProp,
         ...propAnimation
-      };
+      });
     } else {
-      propertyConfigs[key] = base;
+      propertyConfigs[key] = cloneTransitionConfig(base);
     }
   }
   return {
@@ -204,10 +459,10 @@ function getStyleKeys(style) {
 function createAnimations(animationsConfig) {
   const animations = {};
   for (const key in animationsConfig) {
-    animations[key] = {
+    animations[key] = cloneTransitionConfig({
       type: "spring",
       ...animationsConfig[key]
-    };
+    });
   }
   return {
     needsCustomComponent: true,
@@ -243,19 +498,22 @@ function createAnimations(animationsConfig) {
             sharedValue.value = next;
             onFinish?.();
           } else {
-            const cb = onFinish ? () => {
+            const cb = onFinish ? finished => {
               "worklet";
 
-              runOnJS(onFinish)();
+              if (finished !== false) {
+                runOnJS(onFinish)();
+              }
             } : void 0;
+            const animationConfig = cloneTransitionConfig(config);
             if (isWeb) {
-              sharedValue.value = config.type === "spring" ? withSpring(next, config, cb) : withTiming(next, config, cb);
+              sharedValue.value = applyAnimation(next, animationConfig, cb);
             } else {
-              runOnUI(() => {
+              runOnUI((targetValue, animationConfig2) => {
                 "worklet";
 
-                sharedValue.value = config.type === "spring" ? withSpring(next, config, cb) : withTiming(next, config, cb);
-              })();
+                sharedValue.value = applyAnimation(targetValue, animationConfig2, cb);
+              })(next, animationConfig);
             }
           }
         },
@@ -294,20 +552,24 @@ function createAnimations(animationsConfig) {
 
         return getStyle(instance.value);
       });
-      return useAnimatedStyle(() => {
+      const animatedStyle = useAnimatedStyle(() => {
         "worklet";
 
         return styleVal.value;
       });
+      silenceAnimatedComponentDevCheck(animatedStyle);
+      return animatedStyle;
     },
     useAnimatedNumbersStyle(vals, getStyle) {
       const instances = vals.map(v => v.getInstance());
-      return useAnimatedStyle(() => {
+      const animatedStyle = useAnimatedStyle(() => {
         "worklet";
 
         const currentValues = instances.map(inst => inst.value);
         return getStyle(...currentValues);
       }, isWeb ? [getStyle, ...instances] : void 0);
+      silenceAnimatedComponentDevCheck(animatedStyle);
+      return animatedStyle;
     },
     // =========================================================================
     // useAnimations - Main animation hook for components
@@ -321,7 +583,8 @@ function createAnimations(animationsConfig) {
         useStyleEmitter,
         themeName,
         stateRef,
-        styleState
+        styleState,
+        onDidAnimate
       } = animationProps;
       const isHydrating = componentState.unmounted === true;
       const isMounting = componentState.unmounted === "should-enter";
@@ -339,6 +602,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);
@@ -360,6 +642,9 @@ function createAnimations(animationsConfig) {
         exitCycleIdRef.current++;
         exitCompletedRef.current = false;
         pendingExitKeysRef.current.clear();
+        didAnimateCycleIdRef.current++;
+        pendingDidAnimateKeysRef.current.clear();
+        didAnimateCompletedRef.current = true;
       }
       if (justStoppedExiting) {
         exitCycleIdRef.current++;
@@ -368,44 +653,85 @@ 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] = value;
-            continue;
-          }
-          if (canAnimateProperty(key, value, animateOnly)) {
-            animated[key] = value;
-          } else {
-            staticStyles2[key] = 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(() => {
+        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 {
         baseConfig,
         propertyConfigs
@@ -419,8 +745,8 @@ function createAnimations(animationsConfig) {
             propertyConfigs: {}
           };
         }
-        return buildTransitionConfig(props.transition, animations, animationState, getStyleKeys(animatedStyles));
-      }, [isHydrating, props.transition, animatedStyles, animationState]);
+        return buildTransitionConfig(effectiveTransition, animations, animationState, getStyleKeys(animatedStyles));
+      }, [isHydrating, effectiveTransition, animatedStyles, animationState]);
       const configRef = useSharedValue({
         baseConfig,
         propertyConfigs,
@@ -428,92 +754,74 @@ function createAnimations(animationsConfig) {
         isHydrating
       });
       useIsomorphicLayoutEffect(() => {
-        configRef.set({
+        configRef.value = {
           baseConfig,
           propertyConfigs,
           disableAnimation,
           isHydrating
-        });
+        };
       }, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
-      useStyleEmitter?.((nextStyle, effectiveTransition2) => {
+      useStyleEmitter?.((nextStyle, effectiveTransition2, pseudoActive) => {
+        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,
           propertyConfigs: newPropertyConfigs
         } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
-        configRef.set({
+        configRef.value = {
           baseConfig: newBase,
           propertyConfigs: newPropertyConfigs,
-          disableAnimation: configRef.get().disableAnimation,
-          isHydrating: configRef.get().isHydrating
-        });
-        for (const key in nextStyle) {
-          const rawValue = nextStyle[key];
-          const value = resolveDynamicValue(rawValue, isDark);
-          if (value == void 0) continue;
-          if (configRef.get().disableAnimation) {
-            statics[key] = 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(t);
-                }
-              }
-            }
-            continue;
-          }
-          if (canAnimateProperty(key, value, animateOnly)) {
-            animated[key] = value;
-          } else {
-            statics[key] = value;
-          }
-        }
-        animatedTargetsRef.set(animated);
-        staticTargetsRef.set(statics);
-        transformTargetsRef.set(transforms);
+          disableAnimation: configRef.value.disableAnimation,
+          isHydrating: configRef.value.isHydrating
+        };
+        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) {
@@ -523,76 +831,77 @@ 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) {
+          updateMapperState(mapperStateRef, {});
           return {};
         }
+        const previouslyEmitted = mapperState.emitted;
+        const emitted = {};
         const result = {};
-        const config = configRef.get();
-        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 : {};
+        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;
           }
         }
+        updateMapperState(mapperStateRef, emitted);
         return result;
-      }, isWeb ? [animatedStyles, 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", {
           animationKey,