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

package/dist/motion/animatedLayout.js

@@ -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,11 +80,13 @@
  *   (`spec:AST-105` FR2).
  */
 
+import { LATE_START_MS } from "./frameBlock.js";
 import { motionRole } from "./roles.js";
 import { inertCopy, isCopyable, paintedBackground, placeOver, visiblePartCopy, wrapText } from "./transientCopy.js";
 import { isSpring } from "./roleValue.js";
-import { solveSpring, toSpring } from "./spring.js";
+import { progressCurve } from "./progress.js";
 import { registerSpringsTable, SETTLE_SPRING } from "./uikit/springs.js";
+import { themeReducesMotion } from "../privateAttributes/reducedMotion.stylex.js";
 import { reducedMotionCrossFade } from "./uikit/timing.js";
 
 /** The shared motion role (`spec:AST-105` FR4). */
@@ -119,20 +122,19 @@ function settleSpring() {
   return isSpring(value) ? value : SETTLE_SPRING;
 }
 function springProgress(description) {
-  const curve = solveSpring(toSpring(description), {
-    from: 1,
-    to: 0
+  const curve = progressCurve(description, {
+    epsilon: 0.001
   });
-  const durationMs = Math.max(1, curve.settleTime(0.001) * 1000);
+  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) {
-  if (matches(area, '(prefers-reduced-motion: reduce)')) {
+  if (matches(area, '(prefers-reduced-motion: reduce)') || themeReducesMotion(area)) {
     if (!matches(area, '(pointer: coarse)')) {
       return {
         kind: 'instant'
@@ -194,7 +196,7 @@ function round(value) {
  * keyframes, replace composition) is one any Web Animations engine takes, so
  * a failure means no Web Animations at all: the change then lands at once.
  */
-function safeAnimate(element, keyframes, options) {
+function safeAnimate(element, keyframes, options, change) {
   if (typeof element.animate !== 'function') {
     return null;
   }
@@ -205,16 +207,134 @@ function safeAnimate(element, keyframes, options) {
     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.
+ */
+
+/**
+ * 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();
+
+/** The clock of the document whose timeline a start is read on. */
+function clockOf(doc) {
+  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, frame) {
+  const now = clockOf(doc);
+  const held = changeStarts.get(doc);
+  if (held != null && held.frame === frame) {
+    held.last = now;
+    return held;
+  }
+  const start = {
+    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) {
+  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) {
+  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, at) {
+  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();
 const TRANSFORM_PROPERTIES = ['transform', 'translate', 'rotate', 'scale'];
@@ -674,7 +794,8 @@ function batchFor(area) {
         parts: new Map()
       },
       scheduled: false,
-      beforeMove: []
+      beforeMove: [],
+      start: null
     };
     batches.set(area, created);
     // A measurement no commit claims by the next frame (a controlled owner
@@ -695,6 +816,36 @@ function batchFor(area) {
   }
   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) {
+  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, doc) {
+  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, b) {
   return a.width > 0 && a.height > 0 && a.right > b.left && a.left < b.right && a.bottom > b.top && a.top < b.bottom;
 }
@@ -798,6 +949,9 @@ function flush(batch) {
     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.
@@ -817,12 +971,22 @@ function flush(batch) {
     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);
@@ -831,7 +995,8 @@ function flush(batch) {
       element,
       before,
       carried,
-      carriedMs
+      carriedMs,
+      held
     });
   }
   // Every reading (places, transforms, scales) before any glide starts: a
@@ -885,7 +1050,8 @@ function flush(batch) {
       element,
       before,
       carried,
-      carriedMs
+      carriedMs,
+      held
     } = entry;
     const after = entry.after;
     // Nested changes compose: an element inside another moving element moves
@@ -915,7 +1081,7 @@ function flush(batch) {
       }], {
         duration: motion.durationMs,
         easing: motion.easing
-      });
+      }, change);
       continue;
     }
     if (entry.isMovedByApp === true) {
@@ -923,15 +1089,14 @@ function flush(batch) {
       // (`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;
@@ -953,12 +1118,17 @@ function flush(batch) {
     }), {
       duration: durationMs,
       easing: 'linear'
-    });
+    }, change);
     if (animation != null) {
       const glide = {
         animation,
         offsetAt,
-        durationMs
+        durationMs,
+        shownBefore: {
+          x: dx / scale.x,
+          y: dy / scale.y
+        },
+        scale
       };
       glides.set(element, glide);
       animation.addEventListener?.('finish', () => {
@@ -990,6 +1160,7 @@ export function reportLayoutChange(handle, target) {
       if (area == null) {
         return;
       }
+      beginChange(element.ownerDocument);
       const batch = batchFor(area);
       if (batch.changed.has(element)) {
         return;
@@ -1297,6 +1468,9 @@ export function playLayoutChange(handle, element, {
     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
@@ -1305,7 +1479,7 @@ export function playLayoutChange(handle, element, {
     }], {
       duration: motion.durationMs,
       easing: motion.easing
-    });
+    }, change);
   }
   const {
     progress
@@ -1320,7 +1494,7 @@ export function playLayoutChange(handle, element, {
   }), {
     duration: progress.durationMs,
     easing: 'linear'
-  });
+  }, change);
   if (animation != null) {
     const tracked = trackEdgeMotion(element, animation, t => 1 - (1 - from) * progress.remaining(t));
     rideEdge(element, area, edge, rtl, tracked, false);
@@ -1538,6 +1712,8 @@ export function holdLayoutExit(handle, element, done, {
   // 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;
   if (motion.kind === 'fade') {
     animation = safeAnimate(element, [{
@@ -1548,7 +1724,7 @@ export function holdLayoutExit(handle, element, done, {
       duration: motion.durationMs,
       easing: motion.easing,
       fill: 'forwards'
-    });
+    }, change);
   } else {
     const {
       progress
@@ -1563,7 +1739,7 @@ export function holdLayoutExit(handle, element, done, {
       duration: progress.durationMs,
       easing: 'linear',
       fill: 'forwards'
-    });
+    }, change);
     if (animation != null) {
       const tracked = trackEdgeMotion(element, animation, t => from * progress.remaining(t));
       rideEdge(element, area, edge, rtl, tracked, true);
@@ -1658,6 +1834,7 @@ export function holdLayoutSwap(handle, element, {
   if (area == null || layoutMotion(area).kind === 'instant' || !isCopyable(element)) {
     return null;
   }
+  beginChange(element.ownerDocument);
   const box = element.getBoundingClientRect();
   if (!isVisiblePart) {
     const copy = inertCopy(element);
@@ -1689,6 +1866,9 @@ export function playLayoutSwap(swap, how) {
   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';
@@ -1750,7 +1930,7 @@ export function playLayoutSwap(swap, how) {
         duration: durationMs,
         fill: 'both',
         ...options
-      });
+      }, change);
       if (animation != null) {
         animations.push(animation);
       }
@@ -1794,8 +1974,10 @@ export function playLayoutSwap(swap, how) {
           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
@@ -1818,9 +2000,10 @@ export function playLayoutSwap(swap, how) {
 export function playLayoutFrames(handle, parts) {
   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 = [];
   for (const {
     element,
@@ -1830,14 +2013,14 @@ export function playLayoutFrames(handle, parts) {
       duration: motion.progress.durationMs,
       easing: 'linear',
       fill: 'both'
-    }) : safeAnimate(element, [{
+    }, change) : safeAnimate(element, [{
       opacity: 0
     }, {
       opacity: 1
     }], {
       duration: motion.durationMs,
       easing: motion.easing
-    });
+    }, change);
     if (animation != null) {
       animations.push(animation);
     }
@@ -1881,6 +2064,7 @@ export function holdLayoutEdge(handle, element, {
   if (element == null || typeof element.animate !== 'function') {
     return null;
   }
+  beginChange(element.ownerDocument);
   const rect = element.getBoundingClientRect();
   return {
     element,
@@ -1942,18 +2126,25 @@ export function playLayoutEdge(hold, current, handle, {
   const extentAt = (p, ride) => rides ? from + towards(ride) : from + (to - from) * p;
   const clip = hidden => 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 => motion.kind === 'spring' ? 1 - motion.progress.remaining(Math.min(ms, durationMs)) : 0;
   const shown = () => {
-    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 ? ridden.top - own.top : own.bottom - ridden.bottom : isEnd !== rtl ? ridden.left - own.left : own.right - ridden.right;
     }
@@ -2161,6 +2352,7 @@ export function reportLayoutEdge(handle, getElement, {
       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();
@@ -2169,7 +2361,7 @@ export function reportLayoutEdge(handle, getElement, {
           box: extentOf(element, edge),
           rect
         } : {
-          shown: running.shownAt(Number.isFinite(elapsed) ? elapsed : 0),
+          shown: running.shownAt(Number.isFinite(elapsed) ? Math.max(0, elapsed) : 0),
           box: running.box,
           rect
         };
@@ -2204,6 +2396,7 @@ export function reportLayoutEdge(handle, getElement, {
         return;
       }
       const isConceal = after < before.shown;
+      const change = changeStartIn(area, element.ownerDocument);
       if (motion.kind === 'fade') {
         if (!isConceal) {
           safeAnimate(element, [{
@@ -2213,7 +2406,7 @@ export function reportLayoutEdge(handle, getElement, {
           }], {
             duration: motion.durationMs,
             easing: motion.easing
-          });
+          }, change);
         }
         return;
       }
@@ -2237,7 +2430,7 @@ export function reportLayoutEdge(handle, getElement, {
       })), {
         duration: progress.durationMs,
         easing: 'linear'
-      });
+      }, change);
       const reveal = {
         animation,
         shownAt: t => box - curve(t),

package/dist/motion/animator.d.ts

@@ -50,18 +50,18 @@ export interface AnimateOptions {
     crossfadeAs?: 'entrance' | 'exit';
     /**
      * When the call's animations start. By default a call from rest starts
-     * when the browser commits it, and a call that continues motion on screen
-     * (a retarget) starts now, from the value on screen. Ignored with `at`.
+     * when the browser commits it. A call that continues motion on screen (a
+     * retarget) starts now, from the value on screen. A curve whose tail
+     * already shows as at rest counts as rest. Ignored with `at`.
      * - `'commit'`: a call that continues motion also starts when the browser
-     *   commits it, dated by the browser rather than by the main thread, as a
-     *   call from rest is.
-     * - `'presented'`: a call from rest leaves its element at rest and creates
-     *   its animations two frames later, once the frame that carries the
-     *   element at rest has been presented; they then start at their commit. A
-     *   busy UI process delays the motion instead of skipping into it, for two
-     *   frames more before an idle start. Any other change to the animator
-     *   before then creates the animations first, in call order. A call that
-     *   continues motion on screen (a retarget) starts now, as by default.
+     *   commits it. The browser dates it, as it dates a call from rest.
+     * - `'presented'`: a call from rest leaves its element at rest. Its
+     *   animations are created two frames later, once the frame with the
+     *   element at rest has been presented. They then start at their commit,
+     *   so a busy UI process delays the motion instead of skipping into it.
+     *   Any other change to the animator before then creates the animations
+     *   first, in call order. A call that continues motion on screen starts
+     *   now, as by default.
      */
     start?: 'commit' | 'presented';
     /**
@@ -101,7 +101,7 @@ export interface MotionCurve {
     readonly isTransition?: boolean;
 }
 /**
- * Options of `createAnimator`.
+ * Options of `createMotionAnimator`.
  */
 /** How `set` puts values in place. */
 export interface SetOptions {
@@ -302,7 +302,7 @@ export declare function defaultIsCoarsePointer(): boolean;
  *
  * @example
  * ```
- * const animator = createAnimator(sheet);
+ * const animator = createMotionAnimator(sheet);
  * // finger lifts at 1200 px/s heading for the detent at 0 (a component
  * // passes the spring of its motion role):
  * animator.animate({y: 0}, {spring: {response: 0.45, dampingRatio: 0.9}, velocity: {y: 1200}});
@@ -311,5 +311,5 @@ export declare function defaultIsCoarsePointer(): boolean;
  * animator.stop(['y']);
  * ```
  */
-export declare function createAnimator(element: HTMLElement | null, options?: AnimatorOptions): Animator;
+export declare function createMotionAnimator(element: HTMLElement | null, options?: AnimatorOptions): Animator;
 //# sourceMappingURL=animator.d.ts.map

package/dist/motion/animator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../src/motion/animator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../src/motion/animator.ts"],"names":[],"mappings":"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"}