@astryxdesign/core 0.7.7 → 0.7.8-canary.0588a13

package/src/motion/animatedLayout.ts

@@ -3,15 +3,16 @@
 /**
  * @file animatedLayout.ts
  * @input The DOM (layout rectangles, computed style), Web Animations, the
- *   internal `springs.settle` motion role (motion/roles.ts) and the Reduce Motion
- *   cross-fade clock (uikit/timing.ts)
- * @output Exports `createAnimatedLayout` and the opaque `AnimatedLayout`
- *   handle, `reportLayoutChange`, `playLayoutChange`, `holdLayoutExit` /
- *   `releaseLayoutExit`, the in-place swap (`holdLayoutSwap` /
- *   `playLayoutSwap`), the edge reveal's two-state form (`holdLayoutEdge` /
- *   `playLayoutEdge`), `playLayoutFrames` and `applyLayoutChangeTransition`:
- *   the one module that produces the size-change glide and the edge reveal
- *   `spec:AST-105` defines (`architecture:react-component-runtime` INV12)
+ *   internal `springs.settle` motion role (motion/roles.ts), the Reduce Motion
+ *   cross-fade clock (uikit/timing.ts) and the block measure (frameBlock.ts)
+ * @output Exports `createAnimatedLayout`, the opaque `AnimatedLayout` handle,
+ *   `reportLayoutChange`, `playLayoutChange` and `layoutStartFor`. It also
+ *   exports the exit hold (`holdLayoutExit`, `releaseLayoutExit`), the
+ *   in-place swap (`holdLayoutSwap`, `playLayoutSwap`), the edge reveal's
+ *   two-state form (`holdLayoutEdge`, `playLayoutEdge`), `playLayoutFrames`
+ *   and `applyLayoutChangeTransition`. It is the one module that produces the
+ *   size-change glide and the edge reveal `spec:AST-105` defines
+ *   (`architecture:react-component-runtime` INV12)
  * @position Motion foundation, internal to core. A handle comes from the
  *   public `useAnimatedLayout` hook; a component that takes it reports its
  *   size changes through this module.
@@ -79,6 +80,7 @@
  *   (`spec:AST-105` FR2).
  */
 
+import {LATE_START_MS} from './frameBlock';
 import {motionRole} from './roles';
 import {
   inertCopy,
@@ -89,8 +91,10 @@ import {
   wrapText,
 } from './transientCopy';
 import {isSpring} from './roleValue';
-import {solveSpring, toSpring, type SpringDescription} from './spring';
+import {progressCurve} from './progress';
+import type {SpringDescription} from './spring';
 import {registerSpringsTable, SETTLE_SPRING} from './uikit/springs';
+import {themeReducesMotion} from '../privateAttributes/reducedMotion.stylex';
 import {reducedMotionCrossFade} from './uikit/timing';
 
 /** The shared motion role (`spec:AST-105` FR4). */
@@ -142,17 +146,20 @@ function settleSpring(): SpringDescription {
 }
 
 function springProgress(description: SpringDescription): SpringProgress {
-  const curve = solveSpring(toSpring(description), {from: 1, to: 0});
-  const durationMs = Math.max(1, curve.settleTime(0.001) * 1000);
+  const curve = progressCurve(description, {epsilon: 0.001});
+  const durationMs = Math.max(1, curve.duration * 1000);
   return {
     durationMs,
-    remaining: t => (t >= durationMs ? 0 : curve.value(t / 1000)),
+    remaining: t => (t >= durationMs ? 0 : 1 - curve.at(t / 1000)),
   };
 }
 
 /** The motion a change in `area` plays now. */
 function layoutMotion(area: Element): LayoutMotion {
-  if (matches(area, '(prefers-reduced-motion: reduce)')) {
+  if (
+    matches(area, '(prefers-reduced-motion: reduce)') ||
+    themeReducesMotion(area)
+  ) {
     if (!matches(area, '(pointer: coarse)')) {
       return {kind: 'instant'};
     }
@@ -223,6 +230,7 @@ function safeAnimate(
   element: Element,
   keyframes: Keyframe[],
   options: KeyframeAnimationOptions,
+  change?: ChangeStart,
 ): Animation | null {
   if (typeof (element as HTMLElement).animate !== 'function') {
     return null;
@@ -234,16 +242,152 @@ function safeAnimate(
     return null;
   }
   ours.add(animation);
-  // Started on the document timeline's current time, not on the next frame:
-  // a retargeted glide keeps moving through the frame it is replaced in, and
-  // every animation of one change shares the same start.
-  const now = element.ownerDocument.timeline?.currentTime;
+  // The animation starts on the document timeline's current time, not on the
+  // next frame. So a retargeted glide keeps moving through the frame it is
+  // replaced in. After a block since that frame, Chromium's timeline still
+  // reads the frame before the block. A motion started there would skip into
+  // its curve, or past all of it. So it starts at the moment of the change
+  // instead, and the block delays the motion (startFor). Every animation of
+  // one change, in one document, shares that start.
+  const doc = element.ownerDocument;
+  const now = doc.timeline?.currentTime;
   if (now != null) {
-    animation.startTime = now;
+    // The start of the change it is part of, captured when that change made
+    // its first animation (changeStartOf); otherwise the document's.
+    const start =
+      change != null && change.frame === Number(now)
+        ? change
+        : startFor(doc, Number(now));
+    start.last = clockOf(doc);
+    animation.startTime = start.at;
+    if (start.at !== Number(now)) {
+      // Started after the frame time the timeline still reads: until the
+      // timeline gets there it shows its first keyframe, not the element at
+      // rest.
+      const fill = animation.effect?.getTiming().fill;
+      animation.effect?.updateTiming({
+        fill: fill === 'forwards' || fill === 'both' ? 'both' : 'backwards',
+      });
+    }
   }
   return animation;
 }
 
+/**
+ * The start a change's animations share. It is the timeline's frame time,
+ * unless a block ran more than LATE_START_MS past that frame before the first
+ * of them was made. Then they start at the moment the first of them is made.
+ * The frame time is from before the block, so a motion started on it would
+ * skip into its curve, or past all of it. Chromium holds the timeline at the
+ * frame before a long task once anything in the task reads it.
+ */
+interface ChangeStart {
+  /** The frame time the timeline read. */
+  readonly frame: number;
+  /** When the change's animations start. */
+  readonly at: number;
+  /** When the last of them was made, on the document's clock. */
+  last: number;
+}
+
+/**
+ * Each document's change start: an iframe or a Picture-in-Picture window
+ * keeps its own clock, with its own origin and frames.
+ */
+const changeStarts = new WeakMap<Document, ChangeStart>();
+
+/** The clock of the document whose timeline a start is read on. */
+function clockOf(doc: Document): number {
+  return (doc.defaultView?.performance ?? performance).now();
+}
+
+/**
+ * The start the current change's animations share. A change keeps one start
+ * from its first animation through the flush of its glides and the parts that
+ * ride them. That holds however long the work between them runs, such as the
+ * rest of a commit or a slow swap. The start holds while the timeline reads
+ * the same frame: through the task that made it and the microtasks after it.
+ * A change that begins after a block takes a start of its own (beginChange).
+ */
+function startFor(doc: Document, frame: number): ChangeStart {
+  const now = clockOf(doc);
+  const held = changeStarts.get(doc);
+  if (held != null && held.frame === frame) {
+    held.last = now;
+    return held;
+  }
+  const start: ChangeStart = {
+    frame,
+    at: now - frame <= LATE_START_MS ? frame : now,
+    last: now,
+  };
+  changeStarts.set(doc, start);
+  // Let go in a later task: every microtask of this one, where the glides
+  // flush and the parts riding them play, has run by then.
+  const view = doc.defaultView;
+  (view?.setTimeout ?? setTimeout)(() => {
+    if (changeStarts.get(doc) === start) {
+      changeStarts.delete(doc);
+    }
+  }, 0);
+  return start;
+}
+
+/**
+ * A change begins as its "before" is read. After a block since the last
+ * animation of the change before it, it takes a start of its own. So a change
+ * made after a block that follows an earlier layout motion still plays.
+ * Changes made together, with no block between them, share one start.
+ */
+function beginChange(doc: Document): void {
+  const held = changeStarts.get(doc);
+  if (held != null && clockOf(doc) - held.last > LATE_START_MS) {
+    changeStarts.delete(doc);
+  }
+}
+
+/**
+ * When the animations of the layout change being made start. Code that
+ * follows the change on its own clock reads it, such as a rail's width or a
+ * swap's fade. It is the document timeline's current time. After a block
+ * since that frame, it is the moment the change made its first animation.
+ * Until the timeline reaches it, the change has not started.
+ */
+export function layoutStartFor(document: Document): number {
+  const now = document.timeline?.currentTime;
+  return now == null ? 0 : startFor(document, Number(now)).at;
+}
+
+/**
+ * Where `element` shows at the timeline's time `at`: its layout box, moved by
+ * its glide's offset then. After a block, WebKit evaluates a running
+ * translate on the live clock. The timeline still reads the frame before the
+ * block, as every glide here does, so the evaluated box would sit ahead.
+ * Glides write px; a translate in percent is not ours, so the box stays.
+ */
+function shownBoxAt(element: Element, at: number): DOMRect {
+  const box = element.getBoundingClientRect();
+  const glide = glides.get(element);
+  const startTime = glide?.animation.startTime;
+  if (glide == null || startTime == null) {
+    return box;
+  }
+  const translate =
+    element.ownerDocument.defaultView?.getComputedStyle(element).translate ??
+    '';
+  if (translate.includes('%')) {
+    return box;
+  }
+  const [appliedX = 0, appliedY = 0] = numbersIn(translate);
+  const offset = glide.offsetAt(Math.max(0, at - Number(startTime)));
+  return new DOMRect(
+    box.x + (offset.x - appliedX) * glide.scale.x,
+    box.y + (offset.y - appliedY) * glide.scale.y,
+    box.width,
+    box.height,
+  );
+}
+
 /** Every animation this module started, so it can tell the app's apart. */
 const ours = new WeakSet<Animation>();
 
@@ -373,6 +517,13 @@ interface Glide {
   readonly animation: Animation;
   readonly offsetAt: OffsetCurve;
   readonly durationMs: number;
+  /**
+   * The offset where the element showed when its old place was read. After a
+   * block the glide starts further on, where the compositor has it.
+   */
+  readonly shownBefore: {readonly x: number; readonly y: number};
+  /** Its ancestors' scale: page px per px of its own offset. */
+  readonly scale: {readonly x: number; readonly y: number};
 }
 
 const glides = new WeakMap<Element, Glide>();
@@ -818,6 +969,12 @@ interface Batch {
   scheduled: boolean;
   /** Called after every reading and before any glide starts. */
   readonly beforeMove: ((candidates: ReadonlyArray<Element>) => void)[];
+  /**
+   * The start the change's animations share, taken by its first one: its
+   * entrance, or its glides at the flush. A change begun after a block,
+   * before this one flushes, takes its own and leaves this one's.
+   */
+  start: ChangeStart | null;
 }
 
 const batches = new Map<Element, Batch>();
@@ -840,6 +997,7 @@ function batchFor(area: Element): Batch {
       cache: {rects: new Map(), parts: new Map()},
       scheduled: false,
       beforeMove: [],
+      start: null,
     };
     batches.set(area, created);
     // A measurement no commit claims by the next frame (a controlled owner
@@ -861,6 +1019,39 @@ function batchFor(area: Element): Batch {
   return batch;
 }
 
+/**
+ * The start `batch`'s change shares: taken by its first animation, from the
+ * document's (startFor), and kept with the batch through its flush.
+ */
+function changeStartOf(batch: Batch): ChangeStart | undefined {
+  const doc = batch.area.ownerDocument;
+  const now = doc.timeline?.currentTime;
+  if (now == null) {
+    return undefined;
+  }
+  if (batch.start == null || batch.start.frame !== Number(now)) {
+    batch.start = startFor(doc, Number(now));
+  }
+  return batch.start;
+}
+
+/**
+ * The start of the change being made in `area`, captured now for animations
+ * made later in the task, such as the parts riding a glide. It is its batch's
+ * when one is open there, otherwise the document's.
+ */
+function changeStartIn(
+  area: Element | null | undefined,
+  doc: Document,
+): ChangeStart | undefined {
+  const batch = area == null ? undefined : batches.get(area);
+  if (batch != null) {
+    return changeStartOf(batch);
+  }
+  const now = doc.timeline?.currentTime;
+  return now == null ? undefined : startFor(doc, Number(now));
+}
+
 function intersects(a: DOMRect, b: DOMRect): boolean {
   return (
     a.width > 0 &&
@@ -979,6 +1170,9 @@ function flush(batch: Batch): void {
     notify([]);
     return;
   }
+  // The change's own start, taken by its entrance when it played one, even
+  // when another change has begun since.
+  const change = changeStartOf(batch);
   const visible = visibleRect(batch.area);
   // Every running glide stops first and every new place is read before any
   // glide starts, so no reading includes another's new motion.
@@ -987,6 +1181,8 @@ function flush(batch: Batch): void {
     readonly before: DOMRect;
     readonly carried: OffsetCurve;
     readonly carriedMs: number;
+    /** The running glide's offset inside `before`, read on the held frame. */
+    readonly held: {readonly x: number; readonly y: number};
     after?: DOMRect;
     rawX?: number;
     rawY?: number;
@@ -1008,17 +1204,28 @@ function flush(batch: Batch): void {
     const running = glides.get(element);
     let carried = AT_REST;
     let carriedMs = 0;
+    let held = AT_REST(0);
     if (running != null) {
       const time = Number(running.animation.currentTime);
       const elapsed = Number.isFinite(time) ? Math.max(0, time) : 0;
       if (elapsed < running.durationMs) {
-        carried = t => running.offsetAt(elapsed + t);
-        carriedMs = running.durationMs - elapsed;
+        held = running.offsetAt(elapsed);
+      }
+      // The new glide starts at the change's start. After a block, the
+      // compositor kept this glide moving past the held frame until then.
+      const {startTime} = running.animation;
+      const shownAt =
+        change != null && startTime != null
+          ? Math.max(elapsed, change.at - Number(startTime))
+          : elapsed;
+      if (shownAt < running.durationMs) {
+        carried = t => running.offsetAt(shownAt + t);
+        carriedMs = running.durationMs - shownAt;
       }
       running.animation.cancel();
       glides.delete(element);
     }
-    entries.push({element, before, carried, carriedMs});
+    entries.push({element, before, carried, carriedMs, held});
   }
   // Every reading (places, transforms, scales) before any glide starts: a
   // glide started between two readings would make the next one lay the page
@@ -1077,7 +1284,7 @@ function flush(batch: Batch): void {
   // An adopter's own readings join them here, before any glide starts.
   notify(entries.map(entry => entry.element));
   for (const entry of entries) {
-    const {element, before, carried, carriedMs} = entry;
+    const {element, before, carried, carriedMs, held} = entry;
     const after = entry.after as DOMRect;
     // Nested changes compose: an element inside another moving element moves
     // only by its own change, whatever order the changes were reported in.
@@ -1103,10 +1310,12 @@ function flush(batch: Batch): void {
       continue;
     }
     if (motion.kind === 'fade') {
-      safeAnimate(element, [{opacity: 0}, {opacity: 1}], {
-        duration: motion.durationMs,
-        easing: motion.easing,
-      });
+      safeAnimate(
+        element,
+        [{opacity: 0}, {opacity: 1}],
+        {duration: motion.durationMs, easing: motion.easing},
+        change,
+      );
       continue;
     }
     if (entry.isMovedByApp === true) {
@@ -1114,12 +1323,11 @@ function flush(batch: Batch): void {
       // (`spec:AST-105` Coverage).
       continue;
     }
-    // Where it shows now, against its new place, in its own px; the part the
-    // carried glide does not cover is the new move.
+    // Where it showed before the change, against its new place, in its own
+    // px. The part the glide's offset then does not cover is the new move.
     const scale = entry.scale ?? {x: 1, y: 1};
-    const now = carried(0);
-    const moveX = dx / scale.x - now.x;
-    const moveY = dy / scale.y - now.y;
+    const moveX = dx / scale.x - held.x;
+    const moveY = dy / scale.y - held.y;
     const {progress} = motion;
     const offsetAt: OffsetCurve = t => {
       const remaining = progress.remaining(t);
@@ -1135,9 +1343,16 @@ function flush(batch: Batch): void {
         return {translate: `${offset.x}px ${offset.y}px`};
       }),
       {duration: durationMs, easing: 'linear'},
+      change,
     );
     if (animation != null) {
-      const glide: Glide = {animation, offsetAt, durationMs};
+      const glide: Glide = {
+        animation,
+        offsetAt,
+        durationMs,
+        shownBefore: {x: dx / scale.x, y: dy / scale.y},
+        scale,
+      };
       glides.set(element, glide);
       animation.addEventListener?.('finish', () => {
         if (glides.get(element) === glide) {
@@ -1191,6 +1406,7 @@ export function reportLayoutChange(
       if (area == null) {
         return;
       }
+      beginChange(element.ownerDocument);
       const batch = batchFor(area);
       if (batch.changed.has(element)) {
         return;
@@ -1587,11 +1803,22 @@ export function playLayoutChange(
     return null;
   }
   const from = shownAtStart(element, 0);
+  // The start of the change it enters with, which its glides then share.
+  const batch = batches.get(area);
+  const change =
+    batch != null &&
+    [...batch.changed].some(
+      changed => changed === element || changed.contains(element),
+    )
+      ? changeStartOf(batch)
+      : undefined;
   if (motion.kind === 'fade') {
-    return safeAnimate(element, [{opacity: from}, {opacity: 1}], {
-      duration: motion.durationMs,
-      easing: motion.easing,
-    });
+    return safeAnimate(
+      element,
+      [{opacity: from}, {opacity: 1}],
+      {duration: motion.durationMs, easing: motion.easing},
+      change,
+    );
   }
   const {progress} = motion;
   const rtl = edge.startsWith('inline') && isRtl(element);
@@ -1602,6 +1829,7 @@ export function playLayoutChange(
       return {opacity: 1 - hidden, clipPath: fractionClip(edge, hidden, rtl)};
     }),
     {duration: progress.durationMs, easing: 'linear'},
+    change,
   );
   if (animation != null) {
     const tracked = trackEdgeMotion(
@@ -1884,13 +2112,16 @@ export function holdLayoutExit(
   // there.
   const from = shownAtStart(element, 1);
   const rtl = edge.startsWith('inline') && isRtl(element);
+  // The start of the change it exits with, which its glides then share.
+  const change = changeStartOf(batch);
   let animation: Animation | null;
   if (motion.kind === 'fade') {
-    animation = safeAnimate(element, [{opacity: from}, {opacity: 0}], {
-      duration: motion.durationMs,
-      easing: motion.easing,
-      fill: 'forwards',
-    });
+    animation = safeAnimate(
+      element,
+      [{opacity: from}, {opacity: 0}],
+      {duration: motion.durationMs, easing: motion.easing, fill: 'forwards'},
+      change,
+    );
   } else {
     const {progress} = motion;
     animation = safeAnimate(
@@ -1900,6 +2131,7 @@ export function holdLayoutExit(
         return {opacity: shown, clipPath: fractionClip(edge, 1 - shown, rtl)};
       }),
       {duration: progress.durationMs, easing: 'linear', fill: 'forwards'},
+      change,
     );
     if (animation != null) {
       const tracked = trackEdgeMotion(
@@ -2041,6 +2273,7 @@ export function holdLayoutSwap(
   ) {
     return null;
   }
+  beginChange(element.ownerDocument);
   const box = element.getBoundingClientRect();
   if (!isVisiblePart) {
     const copy = inertCopy(element);
@@ -2066,6 +2299,9 @@ export function playLayoutSwap(
     return () => {};
   }
   const {copy} = swap;
+  // Captured now: the parts riding a glide play a microtask later, on the
+  // start of the change they are part of.
+  const change = changeStartIn(swap.area, copy.ownerDocument);
   placeOver(copy, how.host, swap.rect);
   if (how.isOpaque === true) {
     copy.style.zIndex = '1';
@@ -2121,6 +2357,7 @@ export function playLayoutSwap(
         element,
         sample(t => shape(progressAt(t), rideAt(t))),
         {duration: durationMs, fill: 'both', ...options},
+        change,
       );
       if (animation != null) {
         animations.push(animation);
@@ -2168,8 +2405,10 @@ export function playLayoutSwap(
       if (glide == null) {
         return {x: -rideWith.travel.x, y: -rideWith.travel.y};
       }
+      // The parts were read where the ridden element showed then. After a
+      // block it has moved on by the glide's start, so they move with it.
       const now = glide.offsetAt(t);
-      const start = glide.offsetAt(0);
+      const start = glide.shownBefore;
       return {x: now.x - start.x, y: now.y - start.y};
     };
     playAll(durationMs, progressAt, rideAt, {easing: 'linear'}, shape =>
@@ -2192,9 +2431,10 @@ export function playLayoutFrames(
 ): () => void {
   const area = handle?.[AREA]() ?? null;
   const motion = area == null ? null : layoutMotion(area);
-  if (motion == null || motion.kind === 'instant') {
+  if (area == null || motion == null || motion.kind === 'instant') {
     return () => {};
   }
+  const change = changeStartIn(area, area.ownerDocument);
   const animations: Animation[] = [];
   for (const {element, frames: shape} of parts) {
     const animation =
@@ -2209,11 +2449,14 @@ export function playLayoutFrames(
               easing: 'linear',
               fill: 'both',
             },
+            change,
           )
-        : safeAnimate(element, [{opacity: 0}, {opacity: 1}], {
-            duration: motion.durationMs,
-            easing: motion.easing,
-          });
+        : safeAnimate(
+            element,
+            [{opacity: 0}, {opacity: 1}],
+            {duration: motion.durationMs, easing: motion.easing},
+            change,
+          );
     if (animation != null) {
       animations.push(animation);
     }
@@ -2290,6 +2533,7 @@ export function holdLayoutEdge(
   if (element == null || typeof element.animate !== 'function') {
     return null;
   }
+  beginChange(element.ownerDocument);
   const rect = element.getBoundingClientRect();
   return {
     element,
@@ -2365,20 +2609,32 @@ export function playLayoutEdge(
     rides ? from + towards(ride) : from + (to - from) * p;
   const clip = (hidden: number) => pxClip(edge, hidden, rtl);
   const now = () => Number(element.ownerDocument.timeline?.currentTime ?? 0);
-  const startedAt = now();
+  // The start this change's animations share, which after a block is later
+  // than the frame time the timeline still reads (startFor).
+  const startedAt =
+    changeStartIn(areaOf(handle, element), element.ownerDocument)?.at ?? 0;
   const durationMs =
     motion.kind === 'spring' ? motion.progress.durationMs : motion.durationMs;
+  const progressAt = (ms: number) =>
+    motion.kind === 'spring'
+      ? 1 - motion.progress.remaining(Math.min(ms, durationMs))
+      : 0;
   const shown = (): {extent: number; progress: number} | null => {
-    const elapsed = now() - startedAt;
+    const elapsed = Math.max(0, now() - startedAt);
     if (elapsed >= durationMs) {
       return null;
     }
-    const progress =
-      motion.kind === 'spring' ? 1 - motion.progress.remaining(elapsed) : 0;
-    let extent = from + (to - from) * progress;
+    // The fades are read at the change's start, where the glide it retargets
+    // carries on. The extent stays on the timeline's frame, the frame a ride
+    // is measured from.
+    const progress = progressAt(
+      Math.max(elapsed, layoutStartFor(element.ownerDocument) - startedAt),
+    );
+    let extent = from + (to - from) * progressAt(elapsed);
     if (rides && rideWith != null) {
-      // The edge is the ridden element's: read it where it shows.
-      const ridden = rideWith.getBoundingClientRect();
+      // The edge is the ridden element's: read it where it shows, on the
+      // timeline's clock.
+      const ridden = shownBoxAt(rideWith, now());
       const own = element.getBoundingClientRect();
       extent = !isInline
         ? isEnd
@@ -2651,6 +2907,7 @@ export function reportLayoutEdge(
       const element = getElement();
       measured = null;
       if (element != null) {
+        beginChange(element.ownerDocument);
         const running = resizeReveals.get(element);
         const elapsed = Number(running?.animation?.currentTime);
         const rect = element.getBoundingClientRect();
@@ -2662,7 +2919,9 @@ export function reportLayoutEdge(
                 rect,
               }
             : {
-                shown: running.shownAt(Number.isFinite(elapsed) ? elapsed : 0),
+                shown: running.shownAt(
+                  Number.isFinite(elapsed) ? Math.max(0, elapsed) : 0,
+                ),
                 box: running.box,
                 rect,
               };
@@ -2700,12 +2959,15 @@ export function reportLayoutEdge(
         return;
       }
       const isConceal = after < before.shown;
+      const change = changeStartIn(area, element.ownerDocument);
       if (motion.kind === 'fade') {
         if (!isConceal) {
-          safeAnimate(element, [{opacity: 0}, {opacity: 1}], {
-            duration: motion.durationMs,
-            easing: motion.easing,
-          });
+          safeAnimate(
+            element,
+            [{opacity: 0}, {opacity: 1}],
+            {duration: motion.durationMs, easing: motion.easing},
+            change,
+          );
         }
         return;
       }
@@ -2730,6 +2992,7 @@ export function reportLayoutEdge(
           clipPath: pxClip(edge, curve(t), rtl),
         })),
         {duration: progress.durationMs, easing: 'linear'},
+        change,
       );
       const reveal: ResizeReveal = {
         animation,