@wix/motion 2.1.1 → 2.1.3

package/dist/es/motion.js

@@ -55,6 +55,23 @@ class I {
       console.warn("animation was interrupted - aborting onFinish callback - ", n);
     }
   }
+  async onAbort(e) {
+    try {
+      await Promise.all(this.animations.map((n) => n.finished));
+    } catch (n) {
+      if (n.name === "AbortError") {
+        const i = this.animations[0];
+        if (i && !this.isCSS) {
+          const r = i.effect?.target;
+          if (r) {
+            const s = new Event("animationcancel");
+            r.dispatchEvent(s);
+          }
+        }
+        e();
+      }
+    }
+  }
   get finished() {
     return Promise.all(this.animations.map((e) => e.finished));
   }
@@ -72,7 +89,7 @@ class I {
     });
   }
 }
-const G = (t) => t, W = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.sin(t * Math.PI / 2), K = (t) => -(Math.cos(Math.PI * t) - 1) / 2, X = (t) => t ** 2, J = (t) => 1 - (1 - t) ** 2, U = (t) => t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2, Y = (t) => t ** 3, Q = (t) => 1 - (1 - t) ** 3, Z = (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2, tt = (t) => t ** 4, et = (t) => 1 - (1 - t) ** 4, nt = (t) => t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2, it = (t) => t ** 5, st = (t) => 1 - (1 - t) ** 5, rt = (t) => t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2, ot = (t) => t === 0 ? 0 : 2 ** (10 * t - 10), at = (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t), ct = (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2, ut = (t) => 1 - Math.sqrt(1 - t ** 2), ft = (t) => Math.sqrt(1 - (t - 1) ** 2), lt = (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2, mt = (t) => 2.70158 * t ** 3 - 1.70158 * t ** 2, ht = (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2, dt = (t, e = 1.70158 * 1.525) => t < 0.5 ? (2 * t) ** 2 * ((e + 1) * 2 * t - e) / 2 : ((2 * t - 2) ** 2 * ((e + 1) * (t * 2 - 2) + e) + 2) / 2, z = {
+const G = (t) => t, W = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.sin(t * Math.PI / 2), K = (t) => -(Math.cos(Math.PI * t) - 1) / 2, X = (t) => t ** 2, J = (t) => 1 - (1 - t) ** 2, U = (t) => t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2, Y = (t) => t ** 3, Q = (t) => 1 - (1 - t) ** 3, Z = (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2, tt = (t) => t ** 4, et = (t) => 1 - (1 - t) ** 4, nt = (t) => t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2, it = (t) => t ** 5, st = (t) => 1 - (1 - t) ** 5, rt = (t) => t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2, ot = (t) => t === 0 ? 0 : 2 ** (10 * t - 10), at = (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t), ct = (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2, ut = (t) => 1 - Math.sqrt(1 - t ** 2), ft = (t) => Math.sqrt(1 - (t - 1) ** 2), mt = (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2, lt = (t) => 2.70158 * t ** 3 - 1.70158 * t ** 2, ht = (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2, dt = (t, e = 1.70158 * 1.525) => t < 0.5 ? (2 * t) ** 2 * ((e + 1) * 2 * t - e) / 2 : ((2 * t - 2) ** 2 * ((e + 1) * (t * 2 - 2) + e) + 2) / 2, z = {
   linear: G,
   sineIn: W,
   sineOut: B,
@@ -94,11 +111,11 @@ const G = (t) => t, W = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.si
   expoInOut: ct,
   circIn: ut,
   circOut: ft,
-  circInOut: lt,
-  backIn: mt,
+  circInOut: mt,
+  backIn: lt,
   backOut: ht,
   backInOut: dt
-}, F = {
+}, C = {
   linear: "linear",
   ease: "ease",
   easeIn: "ease-in",
@@ -133,10 +150,10 @@ function pt(t) {
   return t === "percentage" ? "%" : t || "px";
 }
 function gt(t) {
-  return t ? F[t] || t : F.linear;
+  return t ? C[t] || t : C.linear;
 }
 function yt(t, e, n, i) {
-  const r = 3 * t, s = 3 * (n - t) - r, u = 1 - r - s, a = 3 * e, l = 3 * (i - e) - a, m = 1 - a - l, o = (h) => ((u * h + s) * h + r) * h, c = (h) => ((m * h + l) * h + a) * h, f = (h) => (3 * u * h + 2 * s) * h + r;
+  const r = 3 * t, s = 3 * (n - t) - r, u = 1 - r - s, a = 3 * e, m = 3 * (i - e) - a, l = 1 - a - m, o = (h) => ((u * h + s) * h + r) * h, c = (h) => ((l * h + m) * h + a) * h, f = (h) => (3 * u * h + 2 * s) * h + r;
   function p(h) {
     let d = h;
     for (let y = 0; y < 8; y++) {
@@ -172,16 +189,16 @@ function vt(t) {
   if (n.length === 0) return;
   const i = [];
   for (const u of n) {
-    const a = u.split(/\s+/), l = parseFloat(a[0]);
-    if (isNaN(l)) return;
-    const m = [];
+    const a = u.split(/\s+/), m = parseFloat(a[0]);
+    if (isNaN(m)) return;
+    const l = [];
     for (let o = 1; o < a.length; o++)
       if (a[o].endsWith("%")) {
         const c = parseFloat(a[o]) / 100;
         if (isNaN(c)) return;
-        m.push(c);
+        l.push(c);
       }
-    m.length === 0 ? i.push({ output: l, pos: null }) : m.length === 1 ? i.push({ output: l, pos: m[0] }) : (i.push({ output: l, pos: m[0] }), i.push({ output: l, pos: m[1] }));
+    l.length === 0 ? i.push({ output: m, pos: null }) : l.length === 1 ? i.push({ output: m, pos: l[0] }) : (i.push({ output: m, pos: l[0] }), i.push({ output: m, pos: l[1] }));
   }
   if (i.length === 0) return;
   i[0].pos === null && (i[0].pos = 0), i[i.length - 1].pos === null && (i[i.length - 1].pos = 1);
@@ -191,9 +208,9 @@ function vt(t) {
       const u = r - 1;
       let a = r;
       for (; a < i.length && i[a].pos === null; ) a++;
-      const l = i[u].pos, m = i[a].pos, o = a - u;
+      const m = i[u].pos, l = i[a].pos, o = a - u;
       for (let c = u + 1; c < a; c++)
-        i[c].pos = l + (m - l) * (c - u) / o;
+        i[c].pos = m + (l - m) * (c - u) / o;
       r = a + 1;
     } else
       r++;
@@ -204,12 +221,12 @@ function vt(t) {
     if (u <= s[0].pos) return s[0].output;
     const a = s[s.length - 1];
     if (u >= a.pos) return a.output;
-    let l = 0, m = s.length - 1;
-    for (; l < m - 1; ) {
-      const f = l + m >>> 1;
-      s[f].pos <= u ? l = f : m = f;
+    let m = 0, l = s.length - 1;
+    for (; m < l - 1; ) {
+      const f = m + l >>> 1;
+      s[f].pos <= u ? m = f : l = f;
     }
-    const o = s[l], c = s[m];
+    const o = s[m], c = s[l];
     return c.pos === o.pos ? c.output : o.output + (c.output - o.output) * (u - o.pos) / (c.pos - o.pos);
   };
 }
@@ -254,7 +271,7 @@ class Et extends I {
       i.animations.forEach((s, u) => {
         const a = s.effect;
         if (!a) return;
-        const { delay: l, duration: m, iterations: o } = this.timingOptions[r][u], c = l + e[r], f = n - (c + m * o);
+        const { delay: m, duration: l, iterations: o } = this.timingOptions[r][u], c = m + e[r], f = n - (c + l * o);
         a.updateTiming({ delay: c + this.delay, endDelay: f });
       });
     });
@@ -264,8 +281,8 @@ class Et extends I {
     for (let i = 0; i < this.timingOptions.length; i++) {
       const r = this.timingOptions[i].reduce((s, u) => {
         if (!u) return s;
-        const { delay: a, duration: l, iterations: m } = u;
-        return Math.max(s, a + l * m);
+        const { delay: a, duration: m, iterations: l } = u;
+        return Math.max(s, a + m * l);
       }, 0);
       n.push(e[i] + r);
     }
@@ -282,7 +299,7 @@ class Et extends I {
     for (const { index: i, group: r } of n) {
       const s = Math.min(i, this.animationGroups.length);
       this.animationGroups.splice(s, 0, r), this.timingOptions.splice(s, 0, r.getTimingOptions());
-      const u = [...r.animations], a = this.animationGroups.slice(0, s).reduce((l, m) => l + m.animations.length, 0);
+      const u = [...r.animations], a = this.animationGroups.slice(0, s).reduce((m, l) => m + l.animations.length, 0);
       this.animations.splice(a, 0, ...u);
     }
     this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((i) => i.ready)).then(() => {
@@ -323,7 +340,7 @@ class _t {
       composite: "add"
     }), { timeline: u } = r;
     this._animation = new Animation(s, u), this._tickCbId = null, this.progress = null, this.customEffect = (a) => e(s.target, a), this._finishHandler = (a) => {
-      this.effect.target?.getAnimations().find((l) => l === this._animation) || this.cancel();
+      this.effect.target?.getAnimations().find((m) => m === this._animation) || this.cancel();
     }, this.addEventListener("finish", this._finishHandler), this.addEventListener("remove", this._finishHandler);
   }
   // private tick method for customEffect loop implementation
@@ -454,7 +471,7 @@ class _t {
 function wt(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var A = { exports: {} }, C = A.exports, x;
+var A = { exports: {} }, F = A.exports, x;
 function Ot() {
   return x || (x = 1, (function(t) {
     (function(e) {
@@ -551,7 +568,7 @@ function Ot() {
         extend: function(o) {
           if (typeof o != "object") throw new Error("expected object");
           var c = Object.create(this);
-          return l(c, o), c.fastdom = this, c.initialize && c.initialize(), c;
+          return m(c, o), c.fastdom = this, c.initialize && c.initialize(), c;
         },
         // override this with a function
         // to prevent Errors in console
@@ -576,13 +593,13 @@ function Ot() {
         var f = o.indexOf(c);
         return !!~f && !!o.splice(f, 1);
       }
-      function l(o, c) {
+      function m(o, c) {
         for (var f in c)
           c.hasOwnProperty(f) && (o[f] = c[f]);
       }
-      var m = e.fastdom = e.fastdom || new r();
-      t.exports = m;
-    })(typeof window < "u" ? window : typeof C < "u" ? C : globalThis);
+      var l = e.fastdom = e.fastdom || new r();
+      t.exports = l;
+    })(typeof window < "u" ? window : typeof F < "u" ? F : globalThis);
   })(A)), A.exports;
 }
 var It = Ot();
@@ -649,7 +666,7 @@ function H(t, e, n) {
       composite: i.composite,
       direction: Tt(i)
     };
-    return q(e) ? (s.duration = i.duration, s.delay = i.delay || 0) : window.ViewTimeline && e?.trigger === "view-progress" ? s.duration = "auto" : (s.duration = 99.99, s.delay = 0.01), {
+    return S(e) ? (s.duration = i.duration, s.delay = i.delay || 0) : window.ViewTimeline && e?.trigger === "view-progress" ? s.duration = "auto" : (s.duration = 99.99, s.delay = 0.01), {
       effect: i,
       options: s,
       id: n && `${n}-${r + 1}`,
@@ -657,12 +674,12 @@ function H(t, e, n) {
     };
   });
 }
-function q(t) {
+function S(t) {
   return !t || t.trigger !== "pointer-move" && t.trigger !== "view-progress";
 }
 function N(t, e, n, i, r) {
   if (t) {
-    if (q(i) && (e.duration = e.duration || 1, r?.reducedMotion))
+    if (S(i) && (e.duration = e.duration || 1, r?.reducedMotion))
       if (e.iterations === 1 || e.iterations == null)
         e = { ...e, duration: 1 };
       else
@@ -700,25 +717,25 @@ function V(t, e, n, i, r) {
   );
   if (!a || a.length === 0)
     return null;
-  const l = H(a, n, e.effectId);
-  let m;
+  const m = H(a, n, e.effectId);
+  let l;
   const o = n?.trigger === "view-progress";
-  o && window.ViewTimeline && (m = new ViewTimeline({
+  o && window.ViewTimeline && (l = new ViewTimeline({
     subject: n.element || w(n.componentId)
   }));
-  const c = l.map(({ effect: f, options: p, id: h, part: d }) => {
+  const c = m.map(({ effect: f, options: p, id: h, part: d }) => {
     const v = d ? kt(s, d) : s, g = new KeyframeEffect(v || null, [], p);
     E.mutate(() => {
       "timing" in f && g.updateTiming(f.timing), g.setKeyframes(f.keyframes);
     });
-    const y = o && m ? { timeline: m } : {}, b = typeof f.customEffect == "function" ? new _t(
+    const y = o && l ? { timeline: l } : {}, b = typeof f.customEffect == "function" ? new _t(
       f.customEffect,
       v || null,
       p,
       y
     ) : new Animation(g, y.timeline);
     if (o)
-      if (m)
+      if (l)
         E.mutate(() => {
           const { start: _, end: k } = R(f);
           b.rangeStart = _, b.rangeEnd = k, b.play();
@@ -726,16 +743,16 @@ function V(t, e, n, i, r) {
       else {
         const { startOffset: _, endOffset: k } = e;
         E.mutate(() => {
-          const P = f.startOffset || _, S = f.endOffset || k;
+          const q = f.startOffset || _, P = f.endOffset || k;
           Object.assign(b, {
             start: {
-              name: P.name,
-              offset: P.offset?.value,
+              name: q.name,
+              offset: q.offset?.value,
               add: f.startOffsetAdd
             },
             end: {
-              name: S.name,
-              offset: S.offset?.value,
+              name: P.name,
+              offset: P.offset?.value,
               add: f.endOffsetAdd
             }
           });
@@ -753,31 +770,31 @@ function V(t, e, n, i, r) {
 function $t(t, e) {
   return t ? `#${t}${e ? `[data-motion-part~="${e}"]` : ""}` : "";
 }
-function qt(t, e) {
-  const { duration: n, delay: i, iterations: r = 1, fill: s, easing: u = "linear", direction: a } = t.options, l = t.effect.name, m = n === "auto";
-  return `${l} ${m ? "auto" : `${n}ms`}${m ? " " : ` ${i || 1}ms `}${u}${s && s !== "none" ? ` ${s}` : ""} ${!r || r === 1 / 0 ? "infinite" : r}${a === "normal" ? "" : ` ${a}`} ${e ? "" : "paused"}`;
+function St(t, e) {
+  const { duration: n, delay: i, iterations: r = 1, fill: s, easing: u = "linear", direction: a } = t.options, m = t.effect.name, l = n === "auto";
+  return `${m} ${l ? "auto" : `${n}ms`}${l ? " " : ` ${i || 1}ms `}${u}${s && s !== "none" ? ` ${s}` : ""} ${!r || r === 1 / 0 ? "infinite" : r}${a === "normal" ? "" : ` ${a}`} ${e ? "" : "paused"}`;
 }
-function Pt(t, e, n) {
-  return t?.style ? (q(n) && (e.duration = e.duration || 1), t.style(e)) : [];
+function qt(t, e, n) {
+  return t?.style ? (S(n) && (e.duration = e.duration || 1), t.style(e)) : [];
 }
 function Gt(t, e, n) {
-  const i = O(e), r = Pt(i, e), s = H(r, n, e.effectId), u = n?.trigger === "view-progress";
-  return s.map((a, l) => {
-    const { start: m, end: o } = u ? R(a.effect) : {};
+  const i = O(e), r = qt(i, e), s = H(r, n, e.effectId), u = n?.trigger === "view-progress";
+  return s.map((a, m) => {
+    const { start: l, end: o } = u ? R(a.effect) : {};
     return {
       target: $t(t, a.part),
-      animation: qt(a, u),
+      animation: St(a, u),
       composition: a.options.composite,
       custom: a.effect.custom,
       name: a.effect.name,
       keyframes: a.effect.keyframes,
-      id: a.id && `${a.id}-${l + 1}`,
+      id: a.id && `${a.id}-${m + 1}`,
       animationTimeline: u ? `--${n?.id}` : "",
-      animationRange: m || o ? `${m} ${o}` : ""
+      animationRange: l || o ? `${l} ${o}` : ""
     };
   });
 }
-function St(t, e, n) {
+function Pt(t, e, n) {
   const i = O(e), r = t instanceof HTMLElement ? t : w(t);
   if (i && i.prepare && r) {
     const s = { measure: L(r), mutate: j(r) };
@@ -790,15 +807,15 @@ function zt(t, e) {
   if (!n)
     return null;
   if (!n.style)
-    return e.effectId && t ? Ft(t, e.effectId) : null;
-  const i = n.getNames(e), s = (typeof t == "string" ? w(t) : t)?.getAnimations(), u = s?.map((l) => l.animationName) || [], a = [];
-  return i.forEach((l) => {
-    u.includes(l) && a.push(
-      s?.find((m) => m.animationName === l)
+    return e.effectId && t ? Ct(t, e.effectId) : null;
+  const i = n.getNames(e), s = (typeof t == "string" ? w(t) : t)?.getAnimations(), u = s?.map((m) => m.animationName) || [], a = [];
+  return i.forEach((m) => {
+    u.includes(m) && a.push(
+      s?.find((l) => l.animationName === m)
     );
   }), a?.length ? new I(a) : null;
 }
-function Ft(t, e) {
+function Ct(t, e) {
   const i = (typeof t == "string" ? w(t) : t)?.getAnimations().filter((r) => {
     const s = r.id || r.animationName;
     return s ? s.startsWith(e) : !0;
@@ -809,9 +826,9 @@ function Dt(t, e, n, i = {}) {
   const { disabled: r, allowActiveEvent: s, ...u } = i, a = V(t, e, n, u);
   if (!a)
     return null;
-  let l = {};
+  let m = {};
   if (n.trigger === "view-progress" && !window.ViewTimeline) {
-    const m = n.element || w(n.componentId), { ready: o } = a;
+    const l = n.element || w(n.componentId), { ready: o } = a;
     return a.animations.map((c) => ({
       /* we use getters for start and end in order to access the animation's start and end
          only when initializing the scrub scene rather than immediately */
@@ -821,7 +838,7 @@ function Dt(t, e, n, i = {}) {
       get end() {
         return c.end;
       },
-      viewSource: m,
+      viewSource: l,
       ready: o,
       getProgress() {
         return a.getProgress();
@@ -836,8 +853,8 @@ function Dt(t, e, n, i = {}) {
       }
     }));
   } else if (n.trigger === "pointer-move") {
-    const m = e, { centeredToTarget: o, transitionDuration: c, transitionEasing: f } = m, p = n.axis;
-    if (m.keyframeEffect) {
+    const l = e, { centeredToTarget: o, transitionDuration: c, transitionEasing: f } = l, p = n.axis;
+    if (l.keyframeEffect) {
       const h = a;
       return h.animations?.length === 0 ? null : {
         target: void 0,
@@ -857,17 +874,17 @@ function Dt(t, e, n, i = {}) {
         }
       };
     }
-    l = {
+    m = {
       centeredToTarget: o,
       allowActiveEvent: s
-    }, e.customEffect && c && (l.transitionDuration = c, l.transitionEasing = D(f)), l.target = a.target;
+    }, e.customEffect && c && (m.transitionDuration = c, m.transitionEasing = D(f)), m.target = a.target;
   }
   return {
-    ...l,
+    ...m,
     getProgress() {
       return a.getProgress();
     },
-    effect(m, o, c, f) {
+    effect(l, o, c, f) {
       a.progress(
         c ? {
           // @ts-expect-error spread error on p
@@ -883,10 +900,10 @@ function Dt(t, e, n, i = {}) {
     }
   };
 }
-function Ct(t, e, n, i = !1) {
+function Ft(t, e, n, i = !1) {
   const r = zt(t, e);
   return r ? (r.ready = new Promise((s) => {
-    St(t, e, s);
+    Pt(t, e, s);
   }), r) : V(t, e, n, { reducedMotion: i });
 }
 function xt(t) {
@@ -897,7 +914,7 @@ function Mt(t, e) {
   for (const { target: i, options: r } of t) {
     const s = xt(i);
     for (const u of s) {
-      const a = Ct(
+      const a = Ft(
         u,
         r,
         void 0,
@@ -913,25 +930,25 @@ function Rt(t, e, n) {
   return new Et(i, t);
 }
 export {
-  mt as backIn,
+  lt as backIn,
   dt as backInOut,
   ht as backOut,
   ut as circIn,
-  lt as circInOut,
+  mt as circInOut,
   ft as circOut,
   Mt as createAnimationGroups,
-  F as cssEasings,
+  C as cssEasings,
   Y as cubicIn,
   Z as cubicInOut,
   Q as cubicOut,
   ot as expoIn,
   ct as expoInOut,
   at as expoOut,
-  Ct as getAnimation,
+  Ft as getAnimation,
   Gt as getCSSAnimation,
   pt as getCssUnits,
   gt as getEasing,
-  Ft as getElementAnimation,
+  Ct as getElementAnimation,
   zt as getElementCSSAnimation,
   D as getJsEasing,
   Dt as getScrubScene,
@@ -939,7 +956,7 @@ export {
   V as getWebAnimation,
   z as jsEasings,
   G as linear,
-  St as prepareAnimation,
+  Pt as prepareAnimation,
   X as quadIn,
   U as quadInOut,
   J as quadOut,