@wix/motion 2.0.1-0 → 2.1.0

package/dist/es/motion.js

@@ -1,4 +1,4 @@
-class O {
+class I {
   animations;
   options;
   ready;
@@ -27,7 +27,7 @@ class O {
   }
   progress(e) {
     for (const n of this.animations) {
-      const { delay: i, duration: s, iterations: r } = n.effect.getTiming(), u = (Number.isFinite(s) ? s : 0) * (Number.isFinite(r) ? r : 1);
+      const { delay: i, duration: r, iterations: s } = n.effect.getTiming(), u = (Number.isFinite(r) ? r : 0) * (Number.isFinite(s) ? s : 1);
       n.currentTime = ((i || 0) + u) * e;
     }
   }
@@ -46,8 +46,8 @@ class O {
       if (n && !this.isCSS) {
         const i = n.effect?.target;
         if (i) {
-          const s = new Event("animationend");
-          i.dispatchEvent(s);
+          const r = new Event("animationend");
+          i.dispatchEvent(r);
         }
       }
       e();
@@ -63,17 +63,17 @@ class O {
   }
   getTimingOptions() {
     return this.animations.map((e) => {
-      const n = e.effect?.getTiming(), i = n?.delay ?? 0, s = Number(n?.duration) || 0, r = n?.iterations ?? 1;
+      const n = e.effect?.getTiming(), i = n?.delay ?? 0, r = Number(n?.duration) || 0, s = n?.iterations ?? 1;
       return {
         delay: i,
-        duration: s,
-        iterations: r
+        duration: r,
+        iterations: s
       };
     });
   }
 }
-const D = (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, dt = (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2, ht = (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: D,
+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 = {
+  linear: G,
   sineIn: W,
   sineOut: B,
   sineInOut: K,
@@ -96,8 +96,8 @@ const D = (t) => t, W = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.si
   circOut: ft,
   circInOut: lt,
   backIn: mt,
-  backOut: dt,
-  backInOut: ht
+  backOut: ht,
+  backInOut: dt
 }, F = {
   linear: "linear",
   ease: "ease",
@@ -135,35 +135,35 @@ function pt(t) {
 function gt(t) {
   return t ? F[t] || t : F.linear;
 }
-function bt(t, e, n, i) {
-  const s = 3 * t, r = 3 * (n - t) - s, u = 1 - s - r, a = 3 * e, l = 3 * (i - e) - a, m = 1 - a - l, o = (d) => ((u * d + r) * d + s) * d, c = (d) => ((m * d + l) * d + a) * d, f = (d) => (3 * u * d + 2 * r) * d + s;
-  function p(d) {
-    let h = d;
-    for (let b = 0; b < 8; b++) {
-      const y = o(h) - d;
-      if (Math.abs(y) < 1e-7) return h;
-      const _ = f(h);
+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;
+  function p(h) {
+    let d = h;
+    for (let y = 0; y < 8; y++) {
+      const b = o(d) - h;
+      if (Math.abs(b) < 1e-7) return d;
+      const _ = f(d);
       if (Math.abs(_) < 1e-6) break;
-      h -= y / _;
+      d -= b / _;
     }
     let v = 0, g = 1;
-    for (h = (v + g) / 2; g - v > 1e-7; ) {
-      const b = o(h);
-      if (Math.abs(b - d) < 1e-7) return h;
-      d > b ? v = h : g = h, h = (v + g) / 2;
+    for (d = (v + g) / 2; g - v > 1e-7; ) {
+      const y = o(d);
+      if (Math.abs(y - h) < 1e-7) return d;
+      h > y ? v = d : g = d, d = (v + g) / 2;
     }
-    return h;
+    return d;
   }
-  return (d) => d <= 0 ? 0 : d >= 1 ? 1 : c(p(d));
+  return (h) => h <= 0 ? 0 : h >= 1 ? 1 : c(p(h));
 }
-function yt(t) {
+function bt(t) {
   const e = t.match(
     /^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/
   );
   if (!e) return;
-  const n = parseFloat(e[1]), i = parseFloat(e[2]), s = parseFloat(e[3]), r = parseFloat(e[4]);
-  if (![n, i, s, r].some(isNaN))
-    return bt(n, i, s, r);
+  const n = parseFloat(e[1]), i = parseFloat(e[2]), r = parseFloat(e[3]), s = parseFloat(e[4]);
+  if (![n, i, r, s].some(isNaN))
+    return yt(n, i, r, s);
 }
 function vt(t) {
   const e = t.match(/^linear\((.+)\)$/);
@@ -185,52 +185,52 @@ function vt(t) {
   }
   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);
-  let s = 0;
-  for (; s < i.length; )
-    if (i[s].pos === null) {
-      const u = s - 1;
-      let a = s;
+  let r = 0;
+  for (; r < i.length; )
+    if (i[r].pos === null) {
+      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;
       for (let c = u + 1; c < a; c++)
         i[c].pos = l + (m - l) * (c - u) / o;
-      s = a + 1;
+      r = a + 1;
     } else
-      s++;
+      r++;
   for (let u = 1; u < i.length; u++)
     i[u].pos < i[u - 1].pos && (i[u].pos = i[u - 1].pos);
-  const r = i;
+  const s = i;
   return (u) => {
-    if (u <= r[0].pos) return r[0].output;
-    const a = r[r.length - 1];
+    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 = r.length - 1;
+    let l = 0, m = s.length - 1;
     for (; l < m - 1; ) {
       const f = l + m >>> 1;
-      r[f].pos <= u ? l = f : m = f;
+      s[f].pos <= u ? l = f : m = f;
     }
-    const o = r[l], c = r[m];
+    const o = s[l], c = s[m];
     return c.pos === o.pos ? c.output : o.output + (c.output - o.output) * (u - o.pos) / (c.pos - o.pos);
   };
 }
-function R(t) {
+function D(t) {
   if (!t) return;
   const e = z[t];
-  return e || (yt(t) ?? vt(t) ?? z.linear);
+  return e || (bt(t) ?? vt(t) ?? z.linear);
 }
-class Et extends O {
+class Et extends I {
   animationGroups;
   delay;
   offset;
   offsetEasing;
   timingOptions;
   constructor(e, n = {}) {
-    const i = e.flatMap((s) => [...s.animations]);
-    super(i), this.animationGroups = e, this.delay = n.delay ?? 0, this.offset = n.offset ?? 0, this.offsetEasing = typeof n.offsetEasing == "function" ? n.offsetEasing : R(n.offsetEasing) ?? D, this.timingOptions = this.animationGroups.map((s) => s.getTimingOptions().map(({ delay: r, duration: u, iterations: a }) => ({
-      delay: r,
+    const i = e.flatMap((r) => [...r.animations]);
+    super(i), this.animationGroups = e, this.delay = n.delay ?? 0, this.offset = n.offset ?? 0, this.offsetEasing = typeof n.offsetEasing == "function" ? n.offsetEasing : D(n.offsetEasing) ?? G, this.timingOptions = this.animationGroups.map((r) => r.getTimingOptions().map(({ delay: s, duration: u, iterations: a }) => ({
+      delay: s,
       duration: Number.isFinite(u) ? u : 0,
       iterations: Number.isFinite(a) ? a : 1
-    }))), this.applyOffsets(), this.ready = Promise.all(e.map((s) => s.ready)).then(() => {
+    }))), this.applyOffsets(), this.ready = Promise.all(e.map((r) => r.ready)).then(() => {
     });
   }
   /**
@@ -244,16 +244,16 @@ class Et extends O {
     const n = e - 1;
     return Array.from(
       { length: e },
-      (i, s) => this.offsetEasing(s / n) * n * this.offset | 0
+      (i, r) => this.offsetEasing(r / n) * n * this.offset | 0
     );
   }
   applyOffsets() {
     const e = this.calculateOffsets(), n = this.getSequenceActiveDuration(e);
-    this.animationGroups.forEach((i, s) => {
-      i.animations.forEach((r, u) => {
-        const a = r.effect;
+    this.animationGroups.forEach((i, r) => {
+      i.animations.forEach((s, u) => {
+        const a = s.effect;
         if (!a) return;
-        const { delay: l, duration: m, iterations: o } = this.timingOptions[s][u], c = l + e[s], f = n - (c + m * o);
+        const { delay: l, duration: m, iterations: o } = this.timingOptions[r][u], c = l + e[r], f = n - (c + m * o);
         a.updateTiming({ delay: c + this.delay, endDelay: f });
       });
     });
@@ -261,12 +261,12 @@ class Et extends O {
   getSequenceActiveDuration(e) {
     const n = [];
     for (let i = 0; i < this.timingOptions.length; i++) {
-      const s = this.timingOptions[i].reduce((r, u) => {
-        if (!u) return r;
+      const r = this.timingOptions[i].reduce((s, u) => {
+        if (!u) return s;
         const { delay: a, duration: l, iterations: m } = u;
-        return Math.max(r, a + l * m);
+        return Math.max(s, a + l * m);
       }, 0);
-      n.push(e[i] + s);
+      n.push(e[i] + r);
     }
     return Math.max(...n);
   }
@@ -277,16 +277,31 @@ class Et extends O {
    */
   addGroups(e) {
     if (e.length === 0) return;
-    const n = [...e].sort((i, s) => s.index - i.index);
-    for (const { index: i, group: s } of n) {
-      const r = Math.min(i, this.animationGroups.length);
-      this.animationGroups.splice(r, 0, s), this.timingOptions.splice(r, 0, s.getTimingOptions());
-      const u = [...s.animations], a = this.animationGroups.slice(0, r).reduce((l, m) => l + m.animations.length, 0);
+    const n = [...e].sort((i, r) => r.index - i.index);
+    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);
       this.animations.splice(a, 0, ...u);
     }
     this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((i) => i.ready)).then(() => {
     });
   }
+  /**
+   * Removes AnimationGroups that match the predicate, then recalculates
+   * stagger offsets for remaining groups. Cancelled animations in removed
+   * groups are returned.
+   */
+  removeGroups(e) {
+    const n = [], i = [], r = [];
+    for (let s = 0; s < this.animationGroups.length; s++)
+      e(this.animationGroups[s]) ? n.push(this.animationGroups[s]) : (i.push(this.animationGroups[s]), r.push(this.timingOptions[s]));
+    if (n.length === 0) return n;
+    for (const s of n)
+      s.cancel();
+    return this.animationGroups = i, this.timingOptions = r, this.animations = i.flatMap((s) => [...s.animations]), this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((s) => s.ready)).then(() => {
+    }), n;
+  }
   async onFinish(e) {
     try {
       await Promise.all(this.animationGroups.map((n) => n.finished)), e();
@@ -301,12 +316,12 @@ class _t {
   progress;
   _tickCbId;
   _finishHandler;
-  constructor(e, n, i, s) {
-    const r = new KeyframeEffect(n, [], {
+  constructor(e, n, i, r) {
+    const s = new KeyframeEffect(n, [], {
       ...i,
       composite: "add"
-    }), { timeline: u } = s;
-    this._animation = new Animation(r, u), this._tickCbId = null, this.progress = null, this.customEffect = (a) => e(r.target, a), this._finishHandler = (a) => {
+    }), { 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.addEventListener("finish", this._finishHandler), this.addEventListener("remove", this._finishHandler);
   }
@@ -439,19 +454,19 @@ function wt(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
 var A = { exports: {} }, C = A.exports, x;
-function It() {
+function Ot() {
   return x || (x = 1, (function(t) {
     (function(e) {
       var n = function() {
       }, i = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.msRequestAnimationFrame || function(o) {
         return setTimeout(o, 16);
       };
-      function s() {
+      function r() {
         var o = this;
         o.reads = [], o.writes = [], o.raf = i.bind(e);
       }
-      s.prototype = {
-        constructor: s,
+      r.prototype = {
+        constructor: r,
         /**
          * We run this inside a try catch
          * so that if any jobs error, we
@@ -473,7 +488,7 @@ function It() {
          */
         measure: function(o, c) {
           var f = c ? o.bind(c) : o;
-          return this.reads.push(f), r(this), f;
+          return this.reads.push(f), s(this), f;
         },
         /**
          * Adds a job to the
@@ -486,7 +501,7 @@ function It() {
          */
         mutate: function(o, c) {
           var f = c ? o.bind(c) : o;
-          return this.writes.push(f), r(this), f;
+          return this.writes.push(f), s(this), f;
         },
         /**
          * Clears a scheduled 'read' or 'write' task.
@@ -542,17 +557,17 @@ function It() {
         // when tasks throw
         catch: null
       };
-      function r(o) {
+      function s(o) {
         o.scheduled || (o.scheduled = !0, o.raf(u.bind(null, o)));
       }
       function u(o) {
         var c = o.writes, f = o.reads, p;
         try {
           n("flushing reads", f.length), o.runTasks(f), n("flushing writes", c.length), o.runTasks(c);
-        } catch (d) {
-          p = d;
+        } catch (h) {
+          p = h;
         }
-        if (o.scheduled = !1, (f.length || c.length) && r(o), p)
+        if (o.scheduled = !1, (f.length || c.length) && s(o), p)
           if (n("task errored", p.message), o.catch) o.catch(p);
           else throw p;
       }
@@ -564,13 +579,13 @@ function It() {
         for (var f in c)
           c.hasOwnProperty(f) && (o[f] = c[f]);
       }
-      var m = e.fastdom = e.fastdom || new s();
+      var m = e.fastdom = e.fastdom || new r();
       t.exports = m;
     })(typeof window < "u" ? window : typeof C < "u" ? C : globalThis);
   })(A)), A.exports;
 }
-var Ot = It();
-const E = /* @__PURE__ */ wt(Ot), $ = {};
+var It = Ot();
+const E = /* @__PURE__ */ wt(It), $ = {};
 function Nt(t) {
   Object.assign($, t);
 }
@@ -595,7 +610,7 @@ function T(t) {
 function M(t, e, n) {
   return `${t.name || "cover"} ${n && t.offset.unit !== "percentage" ? `calc(100% + ${T(t.offset)}${e ? ` + ${e}` : ""})` : e ? `calc(${T(t.offset)} + ${e})` : T(t.offset)}`;
 }
-function G(t) {
+function R(t) {
   return {
     start: M(t.startOffset, t.startOffsetAdd),
     end: M(t.endOffset, t.endOffsetAdd, !0)
@@ -607,17 +622,17 @@ function L(t) {
 function j(t) {
   return (e) => E.mutate(() => e(t));
 }
-function I(t) {
+function O(t) {
   if (t.namedEffect) {
     const e = t.namedEffect.type;
     return typeof e == "string" ? At(e) : null;
   } else if (t.keyframeEffect) {
     const e = (i) => {
-      const { name: s, keyframes: r } = i.keyframeEffect;
-      return [{ ...i, name: s, keyframes: r }];
+      const { name: r, keyframes: s } = i.keyframeEffect;
+      return [{ ...i, name: r, keyframes: s }];
     };
     return { web: e, style: e, getNames: (i) => {
-      const { effectId: s } = i, { name: r } = i.keyframeEffect, u = r || s;
+      const { effectId: r } = i, { name: s } = i.keyframeEffect, u = s || r;
       return u ? [u] : [];
     } };
   } else if (t.customEffect)
@@ -625,18 +640,18 @@ function I(t) {
   return null;
 }
 function H(t, e, n) {
-  return t.map((i, s) => {
-    const r = {
+  return t.map((i, r) => {
+    const s = {
       fill: i.fill,
       easing: gt(i.easing),
       iterations: i.iterations === 0 ? 1 / 0 : i.iterations || 1,
       composite: i.composite,
       direction: Tt(i)
     };
-    return q(e) ? (r.duration = i.duration, r.delay = i.delay || 0) : window.ViewTimeline && e?.trigger === "view-progress" ? r.duration = "auto" : (r.duration = 99.99, r.delay = 0.01), {
+    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), {
       effect: i,
-      options: r,
-      id: n && `${n}-${s + 1}`,
+      options: s,
+      id: n && `${n}-${r + 1}`,
       part: i.part
     };
   });
@@ -644,41 +659,41 @@ function H(t, e, n) {
 function q(t) {
   return !t || t.trigger !== "pointer-move" && t.trigger !== "view-progress";
 }
-function N(t, e, n, i, s) {
+function N(t, e, n, i, r) {
   if (t) {
-    if (q(i) && (e.duration = e.duration || 1, s?.reducedMotion))
+    if (q(i) && (e.duration = e.duration || 1, r?.reducedMotion))
       if (e.iterations === 1 || e.iterations == null)
         e = { ...e, duration: 1 };
       else
         return [];
-    let r;
-    return n instanceof HTMLElement && (r = { measure: L(n), mutate: j(n) }), t.web ? t.web(e, r, s) : t(e, r, s);
+    let s;
+    return n instanceof HTMLElement && (s = { measure: L(n), mutate: j(n) }), t.web ? t.web(e, s, r) : t(e, s, r);
   }
   return [];
 }
-function V(t, e, n, i, s) {
-  const r = t instanceof HTMLElement ? t : w(t, s);
+function V(t, e, n, i, r) {
+  const s = t instanceof HTMLElement ? t : w(t, r);
   if (n?.trigger === "pointer-move" && !e.keyframeEffect) {
     let f = e;
     e.customEffect && (f = {
       ...e,
       namedEffect: { id: "", type: "CustomMouse" }
     });
-    const p = I(
+    const p = O(
       f
-    ), d = N(
+    ), h = N(
       p,
       e,
-      r,
+      s,
       n,
       i
     );
-    return typeof d != "function" ? null : d(r);
+    return typeof h != "function" ? null : h(s);
   }
-  const u = I(e), a = N(
+  const u = O(e), a = N(
     u,
     e,
-    r,
+    s,
     n,
     i
   );
@@ -690,44 +705,44 @@ function V(t, e, n, i, s) {
   o && window.ViewTimeline && (m = new ViewTimeline({
     subject: n.element || w(n.componentId)
   }));
-  const c = l.map(({ effect: f, options: p, id: d, part: h }) => {
-    const v = h ? kt(r, h) : r, g = new KeyframeEffect(v || null, [], p);
+  const c = l.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 b = o && m ? { timeline: m } : {}, y = typeof f.customEffect == "function" ? new _t(
+    const y = o && m ? { timeline: m } : {}, b = typeof f.customEffect == "function" ? new _t(
       f.customEffect,
       v || null,
       p,
-      b
-    ) : new Animation(g, b.timeline);
+      y
+    ) : new Animation(g, y.timeline);
     if (o)
       if (m)
         E.mutate(() => {
-          const { start: _, end: k } = G(f);
-          y.rangeStart = _, y.rangeEnd = k, y.play();
+          const { start: _, end: k } = R(f);
+          b.rangeStart = _, b.rangeEnd = k, b.play();
         });
       else {
         const { startOffset: _, endOffset: k } = e;
         E.mutate(() => {
-          const S = f.startOffset || _, P = f.endOffset || k;
-          Object.assign(y, {
+          const P = f.startOffset || _, S = f.endOffset || k;
+          Object.assign(b, {
             start: {
-              name: S.name,
-              offset: S.offset?.value,
+              name: P.name,
+              offset: P.offset?.value,
               add: f.startOffsetAdd
             },
             end: {
-              name: P.name,
-              offset: P.offset?.value,
+              name: S.name,
+              offset: S.offset?.value,
               add: f.endOffsetAdd
             }
           });
         });
       }
-    return d && (y.id = d), y;
+    return h && (b.id = h), b;
   });
-  return new O(c, {
+  return new I(c, {
     ...e,
     trigger: { ...n || {} },
     // make sure the group is ready after all animation targets are measured and mutated
@@ -738,16 +753,16 @@ function $t(t, e) {
   return t ? `#${t}${e ? `[data-motion-part~="${e}"]` : ""}` : "";
 }
 function qt(t, e) {
-  const { duration: n, delay: i, iterations: s = 1, fill: r, 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}${r && r !== "none" ? ` ${r}` : ""} ${!s || s === 1 / 0 ? "infinite" : s}${a === "normal" ? "" : ` ${a}`} ${e ? "" : "paused"}`;
+  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, n) {
+function Pt(t, e, n) {
   return t?.style ? (q(n) && (e.duration = e.duration || 1), t.style(e)) : [];
 }
-function Dt(t, e, n) {
-  const i = I(e), s = St(i, e), r = H(s, n, e.effectId), u = n?.trigger === "view-progress";
-  return r.map((a, l) => {
-    const { start: m, end: o } = u ? G(a.effect) : {};
+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) : {};
     return {
       target: $t(t, a.part),
       animation: qt(a, u),
@@ -761,36 +776,36 @@ function Dt(t, e, n) {
     };
   });
 }
-function Pt(t, e, n) {
-  const i = I(e), s = t instanceof HTMLElement ? t : w(t);
-  if (i && i.prepare && s) {
-    const r = { measure: L(s), mutate: j(s) };
-    i.prepare(e, r);
+function St(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) };
+    i.prepare(e, s);
   }
   n && E.mutate(n);
 }
 function zt(t, e) {
-  const n = I(e);
+  const n = O(e);
   if (!n)
     return null;
   if (!n.style)
     return e.effectId && t ? Ft(t, e.effectId) : null;
-  const i = n.getNames(e), r = (typeof t == "string" ? w(t) : t)?.getAnimations(), u = r?.map((l) => l.animationName) || [], a = [];
+  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(
-      r?.find((m) => m.animationName === l)
+      s?.find((m) => m.animationName === l)
     );
-  }), a?.length ? new O(a) : null;
+  }), a?.length ? new I(a) : null;
 }
 function Ft(t, e) {
-  const i = (typeof t == "string" ? w(t) : t)?.getAnimations().filter((s) => {
-    const r = s.id || s.animationName;
-    return r ? r.startsWith(e) : !0;
+  const i = (typeof t == "string" ? w(t) : t)?.getAnimations().filter((r) => {
+    const s = r.id || r.animationName;
+    return s ? s.startsWith(e) : !0;
   });
-  return i?.length ? new O(i) : null;
+  return i?.length ? new I(i) : null;
 }
-function Rt(t, e, n, i = {}) {
-  const { disabled: s, allowActiveEvent: r, ...u } = i, a = V(t, e, n, u);
+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 = {};
@@ -811,10 +826,10 @@ function Rt(t, e, n, i = {}) {
         return a.getProgress();
       },
       effect(f, p) {
-        const { activeDuration: d } = c.effect.getComputedTiming(), { delay: h } = c.effect.getTiming();
-        c.currentTime = ((h || 0) + (d || 0)) * p;
+        const { activeDuration: h } = c.effect.getComputedTiming(), { delay: d } = c.effect.getTiming();
+        c.currentTime = ((d || 0) + (h || 0)) * p;
       },
-      disabled: s,
+      disabled: r,
       destroy() {
         c.cancel();
       }
@@ -822,29 +837,29 @@ function Rt(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 d = a;
-      return d.animations?.length === 0 ? null : {
+      const h = a;
+      return h.animations?.length === 0 ? null : {
         target: void 0,
         centeredToTarget: o,
-        ready: d.ready,
+        ready: h.ready,
         _currentProgress: 0,
         getProgress() {
           return this._currentProgress;
         },
         effect(v, g) {
-          const b = p === "x" ? g.x : g.y;
-          this._currentProgress = b, d.progress(b);
+          const y = p === "x" ? g.x : g.y;
+          this._currentProgress = y, h.progress(y);
         },
-        disabled: s ?? !1,
+        disabled: r ?? !1,
         destroy() {
-          d.cancel();
+          h.cancel();
         }
       };
     }
     l = {
       centeredToTarget: o,
-      allowActiveEvent: r
-    }, e.customEffect && c && (l.transitionDuration = c, l.transitionEasing = R(f)), l.target = a.target;
+      allowActiveEvent: s
+    }, e.customEffect && c && (l.transitionDuration = c, l.transitionEasing = D(f)), l.target = a.target;
   }
   return {
     ...l,
@@ -861,45 +876,45 @@ function Rt(t, e, n, i = {}) {
         } : o
       );
     },
-    disabled: s,
+    disabled: r,
     destroy() {
       a.cancel();
     }
   };
 }
 function Ct(t, e, n, i = !1) {
-  const s = zt(t, e);
-  return s ? (s.ready = new Promise((r) => {
-    Pt(t, e, r);
-  }), s) : V(t, e, n, { reducedMotion: i });
+  const r = zt(t, e);
+  return r ? (r.ready = new Promise((s) => {
+    St(t, e, s);
+  }), r) : V(t, e, n, { reducedMotion: i });
 }
 function xt(t) {
   return t === null ? [null] : typeof t == "string" ? Array.from(document.querySelectorAll(t)) : Array.isArray(t) ? t : [t];
 }
 function Mt(t, e) {
   const n = [];
-  for (const { target: i, options: s } of t) {
-    const r = xt(i);
-    for (const u of r) {
+  for (const { target: i, options: r } of t) {
+    const s = xt(i);
+    for (const u of s) {
       const a = Ct(
         u,
-        s,
+        r,
         void 0,
         e?.reducedMotion
       );
-      a instanceof O && n.push(a);
+      a instanceof I && n.push(a);
     }
   }
   return n;
 }
-function Gt(t, e, n) {
+function Rt(t, e, n) {
   const i = Mt(e, n);
   return new Et(i, t);
 }
 export {
   mt as backIn,
-  ht as backInOut,
-  dt as backOut,
+  dt as backInOut,
+  ht as backOut,
   ut as circIn,
   lt as circInOut,
   ft as circOut,
@@ -912,18 +927,18 @@ export {
   ct as expoInOut,
   at as expoOut,
   Ct as getAnimation,
-  Dt as getCSSAnimation,
+  Gt as getCSSAnimation,
   pt as getCssUnits,
   gt as getEasing,
   Ft as getElementAnimation,
   zt as getElementCSSAnimation,
-  R as getJsEasing,
-  Rt as getScrubScene,
-  Gt as getSequence,
+  D as getJsEasing,
+  Dt as getScrubScene,
+  Rt as getSequence,
   V as getWebAnimation,
   z as jsEasings,
-  D as linear,
-  Pt as prepareAnimation,
+  G as linear,
+  St as prepareAnimation,
   X as quadIn,
   U as quadInOut,
   J as quadOut,