motion-v 0.3.0 → 0.4.0

package/dist/es/node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs

@@ -1,202 +1,243 @@
-import { anticipate as F } from "../../easing/anticipate.mjs";
-import { backInOut as K } from "../../easing/back.mjs";
-import { circInOut as E } from "../../easing/circ.mjs";
-import { DOMKeyframesResolver as R } from "../../render/dom/DOMKeyframesResolver.mjs";
-import { noop as g } from "../../utils/noop.mjs";
-import { millisecondsToSeconds as T, secondsToMilliseconds as S } from "../../utils/time-conversion.mjs";
-import { isGenerator as b } from "../generators/utils/is-generator.mjs";
-import { BaseAnimation as D } from "./BaseAnimation.mjs";
-import { MainThreadAnimation as A } from "./MainThreadAnimation.mjs";
-import { acceleratedValues as M } from "./utils/accelerated-values.mjs";
-import { startWaapiAnimation as U } from "./waapi/index.mjs";
-import { isWaapiSupportedEasing as W } from "./waapi/easing.mjs";
-import { attachTimeline as w } from "./waapi/utils/attach-timeline.mjs";
-import { getFinalKeyframe as x } from "./waapi/utils/get-final-keyframe.mjs";
-import { supportsLinearEasing as C } from "./waapi/utils/supports-linear-easing.mjs";
-import { supportsWaapi as G } from "./waapi/utils/supports-waapi.mjs";
-const d = 10, O = 2e4;
-function k(r) {
-  return b(r.type) || r.type === "spring" || !W(r.ease);
+import { anticipate } from "../../easing/anticipate.mjs";
+import { backInOut } from "../../easing/back.mjs";
+import { circInOut } from "../../easing/circ.mjs";
+import { DOMKeyframesResolver } from "../../render/dom/DOMKeyframesResolver.mjs";
+import { noop } from "../../utils/noop.mjs";
+import { millisecondsToSeconds, secondsToMilliseconds } from "../../utils/time-conversion.mjs";
+import { isGenerator } from "../generators/utils/is-generator.mjs";
+import { BaseAnimation } from "./BaseAnimation.mjs";
+import { MainThreadAnimation } from "./MainThreadAnimation.mjs";
+import { acceleratedValues } from "./utils/accelerated-values.mjs";
+import { startWaapiAnimation } from "./waapi/index.mjs";
+import { isWaapiSupportedEasing } from "./waapi/easing.mjs";
+import { attachTimeline } from "./waapi/utils/attach-timeline.mjs";
+import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe.mjs";
+import { supportsLinearEasing } from "./waapi/utils/supports-linear-easing.mjs";
+import { supportsWaapi } from "./waapi/utils/supports-waapi.mjs";
+const sampleDelta = 10;
+const maxDuration = 2e4;
+function requiresPregeneratedKeyframes(options) {
+  return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
-function I(r, e) {
-  const t = new A({
-    ...e,
-    keyframes: r,
+function pregenerateKeyframes(keyframes, options) {
+  const sampleAnimation = new MainThreadAnimation({
+    ...options,
+    keyframes,
     repeat: 0,
     delay: 0,
-    isGenerator: !0
+    isGenerator: true
   });
-  let i = { done: !1, value: r[0] };
-  const s = [];
-  let n = 0;
-  for (; !i.done && n < O; )
-    i = t.sample(n), s.push(i.value), n += d;
+  let state = { done: false, value: keyframes[0] };
+  const pregeneratedKeyframes = [];
+  let t = 0;
+  while (!state.done && t < maxDuration) {
+    state = sampleAnimation.sample(t);
+    pregeneratedKeyframes.push(state.value);
+    t += sampleDelta;
+  }
   return {
     times: void 0,
-    keyframes: s,
-    duration: n - d,
+    keyframes: pregeneratedKeyframes,
+    duration: t - sampleDelta,
     ease: "linear"
   };
 }
-const P = {
-  anticipate: F,
-  backInOut: K,
-  circInOut: E
+const unsupportedEasingFunctions = {
+  anticipate,
+  backInOut,
+  circInOut
 };
-function L(r) {
-  return r in P;
+function isUnsupportedEase(key) {
+  return key in unsupportedEasingFunctions;
 }
-class ne extends D {
-  constructor(e) {
-    super(e);
-    const { name: t, motionValue: i, element: s, keyframes: n } = this.options;
-    this.resolver = new R(n, (o, a) => this.onKeyframesResolved(o, a), t, i, s), this.resolver.scheduleResolve();
-  }
-  initPlayback(e, t) {
-    var i;
-    let { duration: s = 300, times: n, ease: o, type: a, motionValue: m, name: h, startTime: p } = this.options;
-    if (!(!((i = m.owner) === null || i === void 0) && i.current))
-      return !1;
-    if (typeof o == "string" && C() && L(o) && (o = P[o]), k(this.options)) {
-      const { onComplete: c, onUpdate: y, motionValue: f, element: v, ...V } = this.options, u = I(e, V);
-      e = u.keyframes, e.length === 1 && (e[1] = e[0]), s = u.duration, n = u.times, o = u.ease, a = "keyframes";
+class AcceleratedAnimation extends BaseAnimation {
+  constructor(options) {
+    super(options);
+    const { name, motionValue, element, keyframes } = this.options;
+    this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue, element);
+    this.resolver.scheduleResolve();
+  }
+  initPlayback(keyframes, finalKeyframe) {
+    var _a;
+    let { duration = 300, times, ease, type, motionValue, name, startTime } = this.options;
+    if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {
+      return false;
+    }
+    if (typeof ease === "string" && supportsLinearEasing() && isUnsupportedEase(ease)) {
+      ease = unsupportedEasingFunctions[ease];
+    }
+    if (requiresPregeneratedKeyframes(this.options)) {
+      const { onComplete, onUpdate, motionValue: motionValue2, element, ...options } = this.options;
+      const pregeneratedAnimation = pregenerateKeyframes(keyframes, options);
+      keyframes = pregeneratedAnimation.keyframes;
+      if (keyframes.length === 1) {
+        keyframes[1] = keyframes[0];
+      }
+      duration = pregeneratedAnimation.duration;
+      times = pregeneratedAnimation.times;
+      ease = pregeneratedAnimation.ease;
+      type = "keyframes";
+    }
+    const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
+    animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+    if (this.pendingTimeline) {
+      attachTimeline(animation, this.pendingTimeline);
+      this.pendingTimeline = void 0;
+    } else {
+      animation.onfinish = () => {
+        const { onComplete } = this.options;
+        motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe));
+        onComplete && onComplete();
+        this.cancel();
+        this.resolveFinishedPromise();
+      };
     }
-    const l = U(m.owner.current, h, e, { ...this.options, duration: s, times: n, ease: o });
-    return l.startTime = p ?? this.calcStartTime(), this.pendingTimeline ? (w(l, this.pendingTimeline), this.pendingTimeline = void 0) : l.onfinish = () => {
-      const { onComplete: c } = this.options;
-      m.set(x(e, this.options, t)), c && c(), this.cancel(), this.resolveFinishedPromise();
-    }, {
-      animation: l,
-      duration: s,
-      times: n,
-      type: a,
-      ease: o,
-      keyframes: e
+    return {
+      animation,
+      duration,
+      times,
+      type,
+      ease,
+      keyframes
     };
   }
   get duration() {
-    const { resolved: e } = this;
-    if (!e)
+    const { resolved } = this;
+    if (!resolved)
       return 0;
-    const { duration: t } = e;
-    return T(t);
+    const { duration } = resolved;
+    return millisecondsToSeconds(duration);
   }
   get time() {
-    const { resolved: e } = this;
-    if (!e)
+    const { resolved } = this;
+    if (!resolved)
       return 0;
-    const { animation: t } = e;
-    return T(t.currentTime || 0);
+    const { animation } = resolved;
+    return millisecondsToSeconds(animation.currentTime || 0);
   }
-  set time(e) {
-    const { resolved: t } = this;
-    if (!t)
+  set time(newTime) {
+    const { resolved } = this;
+    if (!resolved)
       return;
-    const { animation: i } = t;
-    i.currentTime = S(e);
+    const { animation } = resolved;
+    animation.currentTime = secondsToMilliseconds(newTime);
   }
   get speed() {
-    const { resolved: e } = this;
-    if (!e)
+    const { resolved } = this;
+    if (!resolved)
       return 1;
-    const { animation: t } = e;
-    return t.playbackRate;
+    const { animation } = resolved;
+    return animation.playbackRate;
   }
-  set speed(e) {
-    const { resolved: t } = this;
-    if (!t)
+  set speed(newSpeed) {
+    const { resolved } = this;
+    if (!resolved)
       return;
-    const { animation: i } = t;
-    i.playbackRate = e;
+    const { animation } = resolved;
+    animation.playbackRate = newSpeed;
   }
   get state() {
-    const { resolved: e } = this;
-    if (!e)
+    const { resolved } = this;
+    if (!resolved)
       return "idle";
-    const { animation: t } = e;
-    return t.playState;
+    const { animation } = resolved;
+    return animation.playState;
   }
   get startTime() {
-    const { resolved: e } = this;
-    if (!e)
+    const { resolved } = this;
+    if (!resolved)
       return null;
-    const { animation: t } = e;
-    return t.startTime;
+    const { animation } = resolved;
+    return animation.startTime;
   }
   /**
    * Replace the default DocumentTimeline with another AnimationTimeline.
    * Currently used for scroll animations.
    */
-  attachTimeline(e) {
-    if (!this._resolved)
-      this.pendingTimeline = e;
-    else {
-      const { resolved: t } = this;
-      if (!t)
-        return g;
-      const { animation: i } = t;
-      w(i, e);
+  attachTimeline(timeline) {
+    if (!this._resolved) {
+      this.pendingTimeline = timeline;
+    } else {
+      const { resolved } = this;
+      if (!resolved)
+        return noop;
+      const { animation } = resolved;
+      attachTimeline(animation, timeline);
     }
-    return g;
+    return noop;
   }
   play() {
     if (this.isStopped)
       return;
-    const { resolved: e } = this;
-    if (!e)
+    const { resolved } = this;
+    if (!resolved)
       return;
-    const { animation: t } = e;
-    t.playState === "finished" && this.updateFinishedPromise(), t.play();
+    const { animation } = resolved;
+    if (animation.playState === "finished") {
+      this.updateFinishedPromise();
+    }
+    animation.play();
   }
   pause() {
-    const { resolved: e } = this;
-    if (!e)
+    const { resolved } = this;
+    if (!resolved)
       return;
-    const { animation: t } = e;
-    t.pause();
+    const { animation } = resolved;
+    animation.pause();
   }
   stop() {
-    if (this.resolver.cancel(), this.isStopped = !0, this.state === "idle")
+    this.resolver.cancel();
+    this.isStopped = true;
+    if (this.state === "idle")
       return;
-    this.resolveFinishedPromise(), this.updateFinishedPromise();
-    const { resolved: e } = this;
-    if (!e)
+    this.resolveFinishedPromise();
+    this.updateFinishedPromise();
+    const { resolved } = this;
+    if (!resolved)
       return;
-    const { animation: t, keyframes: i, duration: s, type: n, ease: o, times: a } = e;
-    if (t.playState === "idle" || t.playState === "finished")
+    const { animation, keyframes, duration, type, ease, times } = resolved;
+    if (animation.playState === "idle" || animation.playState === "finished") {
       return;
+    }
     if (this.time) {
-      const { motionValue: h, onUpdate: p, onComplete: l, element: c, ...y } = this.options, f = new A({
-        ...y,
-        keyframes: i,
-        duration: s,
-        type: n,
-        ease: o,
-        times: a,
-        isGenerator: !0
-      }), v = S(this.time);
-      h.setWithVelocity(f.sample(v - d).value, f.sample(v).value, d);
+      const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
+      const sampleAnimation = new MainThreadAnimation({
+        ...options,
+        keyframes,
+        duration,
+        type,
+        ease,
+        times,
+        isGenerator: true
+      });
+      const sampleTime = secondsToMilliseconds(this.time);
+      motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
     }
-    const { onStop: m } = this.options;
-    m && m(), this.cancel();
+    const { onStop } = this.options;
+    onStop && onStop();
+    this.cancel();
   }
   complete() {
-    const { resolved: e } = this;
-    e && e.animation.finish();
+    const { resolved } = this;
+    if (!resolved)
+      return;
+    resolved.animation.finish();
   }
   cancel() {
-    const { resolved: e } = this;
-    e && e.animation.cancel();
+    const { resolved } = this;
+    if (!resolved)
+      return;
+    resolved.animation.cancel();
   }
-  static supports(e) {
-    const { motionValue: t, name: i, repeatDelay: s, repeatType: n, damping: o, type: a } = e;
-    return G() && i && M.has(i) && t && t.owner && t.owner.current instanceof HTMLElement && /**
+  static supports(options) {
+    const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+    return supportsWaapi() && name && acceleratedValues.has(name) && motionValue && motionValue.owner && motionValue.owner.current instanceof HTMLElement && /**
      * If we're outputting values to onUpdate then we can't use WAAPI as there's
      * no way to read the value from WAAPI every frame.
      */
-    !t.owner.getProps().onUpdate && !s && n !== "mirror" && o !== 0 && a !== "inertia";
+    !motionValue.owner.getProps().onUpdate && !repeatDelay && repeatType !== "mirror" && damping !== 0 && type !== "inertia";
   }
 }
 export {
-  ne as AcceleratedAnimation
+  AcceleratedAnimation
 };

package/dist/es/node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs

@@ -1,19 +1,23 @@
-import { time as l } from "../../frameloop/sync-time.mjs";
-import { flushKeyframeResolvers as m } from "../../render/utils/KeyframesResolver.mjs";
-import { canAnimate as v } from "./utils/can-animate.mjs";
-import { getFinalKeyframe as p } from "./waapi/utils/get-final-keyframe.mjs";
-const c = 40;
-class F {
-  constructor({ autoplay: e = !0, delay: t = 0, type: i = "keyframes", repeat: o = 0, repeatDelay: r = 0, repeatType: n = "loop", ...s }) {
-    this.isStopped = !1, this.hasAttemptedResolve = !1, this.createdAt = l.now(), this.options = {
-      autoplay: e,
-      delay: t,
-      type: i,
-      repeat: o,
-      repeatDelay: r,
-      repeatType: n,
-      ...s
-    }, this.updateFinishedPromise();
+import { time } from "../../frameloop/sync-time.mjs";
+import { flushKeyframeResolvers } from "../../render/utils/KeyframesResolver.mjs";
+import { canAnimate } from "./utils/can-animate.mjs";
+import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe.mjs";
+const MAX_RESOLVE_DELAY = 40;
+class BaseAnimation {
+  constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
+    this.isStopped = false;
+    this.hasAttemptedResolve = false;
+    this.createdAt = time.now();
+    this.options = {
+      autoplay,
+      delay,
+      type,
+      repeat,
+      repeatDelay,
+      repeatType,
+      ...options
+    };
+    this.updateFinishedPromise();
   }
   /**
    * This method uses the createdAt and resolvedAt to calculate the
@@ -26,7 +30,9 @@ class F {
    * to avoid a sudden jump into the animation.
    */
   calcStartTime() {
-    return this.resolvedAt ? this.resolvedAt - this.createdAt > c ? this.resolvedAt : this.createdAt : this.createdAt;
+    if (!this.resolvedAt)
+      return this.createdAt;
+    return this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY ? this.resolvedAt : this.createdAt;
   }
   /**
    * A getter for resolved data. If keyframes are not yet resolved, accessing
@@ -34,29 +40,39 @@ class F {
    * This is a deoptimisation, but at its worst still batches read/writes.
    */
   get resolved() {
-    return !this._resolved && !this.hasAttemptedResolve && m(), this._resolved;
+    if (!this._resolved && !this.hasAttemptedResolve) {
+      flushKeyframeResolvers();
+    }
+    return this._resolved;
   }
   /**
    * A method to be called when the keyframes resolver completes. This method
    * will check if its possible to run the animation and, if not, skip it.
    * Otherwise, it will call initPlayback on the implementing class.
    */
-  onKeyframesResolved(e, t) {
-    this.resolvedAt = l.now(), this.hasAttemptedResolve = !0;
-    const { name: i, type: o, velocity: r, delay: n, onComplete: s, onUpdate: h, isGenerator: a } = this.options;
-    if (!a && !v(e, i, o, r))
-      if (n)
-        this.options.duration = 0;
-      else {
-        h == null || h(p(e, this.options, t)), s == null || s(), this.resolveFinishedPromise();
+  onKeyframesResolved(keyframes, finalKeyframe) {
+    this.resolvedAt = time.now();
+    this.hasAttemptedResolve = true;
+    const { name, type, velocity, delay, onComplete, onUpdate, isGenerator } = this.options;
+    if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
+      if (!delay) {
+        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
+        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        this.resolveFinishedPromise();
         return;
+      } else {
+        this.options.duration = 0;
       }
-    const d = this.initPlayback(e, t);
-    d !== !1 && (this._resolved = {
-      keyframes: e,
-      finalKeyframe: t,
-      ...d
-    }, this.onPostResolved());
+    }
+    const resolvedAnimation = this.initPlayback(keyframes, finalKeyframe);
+    if (resolvedAnimation === false)
+      return;
+    this._resolved = {
+      keyframes,
+      finalKeyframe,
+      ...resolvedAnimation
+    };
+    this.onPostResolved();
   }
   onPostResolved() {
   }
@@ -65,15 +81,15 @@ class F {
    * resolves when the animation finishes at all but in a future update could/should
    * reject if its cancels.
    */
-  then(e, t) {
-    return this.currentFinishedPromise.then(e, t);
+  then(resolve, reject) {
+    return this.currentFinishedPromise.then(resolve, reject);
   }
   updateFinishedPromise() {
-    this.currentFinishedPromise = new Promise((e) => {
-      this.resolveFinishedPromise = e;
+    this.currentFinishedPromise = new Promise((resolve) => {
+      this.resolveFinishedPromise = resolve;
     });
   }
 }
 export {
-  F as BaseAnimation
+  BaseAnimation
 };