@ssgoi/core/dist/transitions/index.js

Core animation engine for SSGOI - Native app-like page transitions with spring physics

const h = ($ = {}) => {
  const {
    from: e = 0,
    to: s = 1,
    spring: f = { stiffness: 300, damping: 30 },
    key: l
  } = $;
  return {
    in: (u) => ({
      spring: f,
      tick: (y) => {
        const a = e + (s - e) * y;
        u.style.opacity = a.toString();
      }
    }),
    out: (u) => ({
      spring: f,
      tick: (y) => {
        const a = e + (s - e) * y;
        u.style.opacity = a.toString();
      }
    }),
    ...l && { key: l }
  };
}, d = ($ = {}) => {
  const {
    start: e = 0,
    opacity: s = 0,
    axis: f = "both",
    spring: l = { stiffness: 300, damping: 30 },
    key: u
  } = $, y = (a) => {
    switch (f) {
      case "x":
        return `scaleX(${a})`;
      case "y":
        return `scaleY(${a})`;
      case "both":
      default:
        return `scale(${a})`;
    }
  };
  return {
    in: (a) => ({
      spring: l,
      tick: (n) => {
        const t = e + (1 - e) * n;
        a.style.transform = y(t), a.style.opacity = (s + (1 - s) * n).toString();
      }
    }),
    out: (a) => ({
      spring: l,
      tick: (n) => {
        const t = e + (1 - e) * n;
        a.style.transform = y(t), a.style.opacity = (s + (1 - s) * n).toString();
      }
    }),
    ...u && { key: u }
  };
}, x = ($ = {}) => {
  const {
    direction: e,
    distance: s = 100,
    opacity: f = 0,
    fade: l = !0,
    axis: u,
    spring: y = { stiffness: 400, damping: 35 },
    key: a
  } = $, t = e || (u === "x" ? "left" : u === "y" ? "up" : "left"), c = (i) => typeof i == "number" ? `${i}px` : i, o = (i) => {
    const r = 1 - i, p = typeof s == "number" ? r * s : `calc(${c(s)} * ${r})`;
    switch (t) {
      case "left":
        return typeof s == "number" ? `translateX(${-p}px)` : `translateX(calc(-1 * ${p}))`;
      case "right":
        return typeof s == "number" ? `translateX(${p}px)` : `translateX(${p})`;
      case "up":
        return typeof s == "number" ? `translateY(${-p}px)` : `translateY(calc(-1 * ${p}))`;
      case "down":
        return typeof s == "number" ? `translateY(${p}px)` : `translateY(${p})`;
    }
  };
  return {
    in: (i) => ({
      spring: y,
      tick: (r) => {
        i.style.transform = o(r), l && (i.style.opacity = (f + (1 - f) * r).toString());
      }
    }),
    out: (i) => ({
      spring: y,
      tick: (r) => {
        i.style.transform = o(r), l && (i.style.opacity = (f + (1 - f) * r).toString());
      }
    }),
    ...a && { key: a }
  };
}, k = ($ = {}) => {
  const {
    degrees: e = 360,
    clockwise: s = !0,
    scale: f = !1,
    fade: l = !0,
    origin: u = "center",
    axis: y = "2d",
    perspective: a = 800,
    spring: n = { stiffness: 500, damping: 25 },
    key: t
  } = $, c = s ? e : -e, o = (i) => {
    const r = (1 - i) * c;
    switch (y) {
      case "x":
        return `perspective(${a}px) rotateX(${r}deg)`;
      case "y":
        return `perspective(${a}px) rotateY(${r}deg)`;
      case "z":
        return `rotateZ(${r}deg)`;
      case "2d":
      default:
        return `rotate(${r}deg)`;
    }
  };
  return {
    in: (i) => ({
      spring: n,
      tick: (r) => {
        const p = [o(r)];
        f && p.push(`scale(${r})`), i.style.transform = p.join(" "), i.style.transformOrigin = u, l && (i.style.opacity = r.toString());
      }
    }),
    out: (i) => ({
      spring: n,
      tick: (r) => {
        const p = [o(r)];
        f && p.push(`scale(${r})`), i.style.transform = p.join(" "), i.style.transformOrigin = u, l && (i.style.opacity = r.toString());
      }
    }),
    ...t && { key: t }
  };
}, S = ($ = {}) => {
  const {
    height: e = 20,
    intensity: s = 1,
    scale: f = !0,
    fade: l = !0,
    direction: u = "up",
    spring: y = { stiffness: 800, damping: 15 },
    key: a
  } = $;
  return {
    in: (n) => ({
      spring: y,
      tick: (t) => {
        const c = [], o = Math.sin(t * Math.PI * (1 + s)), i = 1 - t, r = o * e * i;
        if (u === "up" ? c.push(`translateY(${-Math.abs(r)}px)`) : c.push(`translateY(${Math.abs(r)}px)`), f) {
          const p = 0.8 + t * 0.2 + o * 0.05 * i;
          c.push(`scale(${p})`);
        }
        n.style.transform = c.join(" "), l && (n.style.opacity = t.toString());
      }
    }),
    out: (n) => ({
      spring: y,
      tick: (t) => {
        const c = [], o = Math.sin(t * Math.PI * (1 + s)), i = 1 - t, r = o * e * i;
        if (u === "up" ? c.push(`translateY(${-Math.abs(r)}px)`) : c.push(`translateY(${Math.abs(r)}px)`), f) {
          const p = 0.8 + t * 0.2 + o * 0.05 * i;
          c.push(`scale(${p})`);
        }
        n.style.transform = c.join(" "), l && (n.style.opacity = t.toString());
      }
    }),
    ...a && { key: a }
  };
}, Y = ($ = {}) => {
  const {
    amount: e = 10,
    opacity: s = 0,
    scale: f = !1,
    fade: l = !0,
    spring: u = { stiffness: 300, damping: 30 },
    key: y
  } = $, a = (n) => typeof n == "number" ? `${n}px` : n;
  return {
    in: (n) => ({
      spring: u,
      tick: (t) => {
        const c = 1 - t, o = typeof e == "number" ? c * e : `calc(${a(e)} * ${c})`;
        n.style.filter = typeof e == "number" ? `blur(${o}px)` : `blur(${o})`, f && (n.style.transform = `scale(${0.8 + t * 0.2})`), l && (n.style.opacity = (s + (1 - s) * t).toString());
      }
    }),
    out: (n) => ({
      spring: u,
      tick: (t) => {
        const c = 1 - t, o = typeof e == "number" ? c * e : `calc(${a(e)} * ${c})`;
        n.style.filter = typeof e == "number" ? `blur(${o}px)` : `blur(${o})`, f && (n.style.transform = `scale(${0.8 + t * 0.2})`), l && (n.style.opacity = (s + (1 - s) * t).toString());
      }
    }),
    ...y && { key: y }
  };
}, M = ($ = {}) => {
  const {
    x: e = 0,
    y: s = -100,
    opacity: f = 0,
    spring: l = { stiffness: 400, damping: 35 },
    key: u
  } = $, y = (n) => typeof n == "number" ? `${n}px` : n, a = (n) => typeof n == "number" ? `${n}px` : n;
  return {
    in: (n) => ({
      spring: l,
      tick: (t) => {
        const c = typeof e == "number" ? (1 - t) * e : `calc(${y(e)} * ${1 - t})`, o = typeof s == "number" ? (1 - t) * s : `calc(${a(s)} * ${1 - t})`;
        n.style.transform = `translate(${typeof e == "number" ? c + "px" : c}, ${typeof s == "number" ? o + "px" : o})`, n.style.opacity = (f + (1 - f) * t).toString();
      }
    }),
    out: (n) => ({
      spring: l,
      tick: (t) => {
        const c = typeof e == "number" ? (1 - t) * e : `calc(${y(e)} * ${1 - t})`, o = typeof s == "number" ? (1 - t) * s : `calc(${a(s)} * ${1 - t})`;
        n.style.transform = `translate(${typeof e == "number" ? c + "px" : c}, ${typeof s == "number" ? o + "px" : o})`, n.style.opacity = (f + (1 - f) * t).toString();
      }
    }),
    ...u && { key: u }
  };
}, O = ($ = {}) => {
  const {
    shape: e = "circle",
    origin: s = "center",
    scale: f = 1.5,
    fade: l = !1,
    spring: u = { stiffness: 300, damping: 30 },
    key: y
  } = $, a = () => {
    switch (s) {
      case "top":
        return "50% 0%";
      case "bottom":
        return "50% 100%";
      case "left":
        return "0% 50%";
      case "right":
        return "100% 50%";
      case "top-left":
        return "0% 0%";
      case "top-right":
        return "100% 0%";
      case "bottom-left":
        return "0% 100%";
      case "bottom-right":
        return "100% 100%";
      case "center":
      default:
        return "50% 50%";
    }
  }, n = (t) => {
    const c = t * f * 100, o = a();
    switch (e) {
      case "ellipse":
        return `ellipse(${c}% ${c * 0.75}% at ${o})`;
      case "square": {
        const i = t * f * 100, [r, p] = o.split(" "), m = parseFloat(r), g = parseFloat(p), b = i / 2;
        return `polygon(${m - b}% ${g - b}%, ${m + b}% ${g - b}%, ${m + b}% ${g + b}%, ${m - b}% ${g + b}%)`;
      }
      case "circle":
      default:
        return `circle(${c}% at ${o})`;
    }
  };
  return {
    in: (t) => ({
      spring: u,
      tick: (c) => {
        t.style.clipPath = n(c), l && (t.style.opacity = c.toString());
      }
    }),
    out: (t) => ({
      spring: u,
      tick: (c) => {
        t.style.clipPath = n(c), l && (t.style.opacity = c.toString());
      }
    }),
    ...y && { key: y }
  };
}, V = ($ = {}) => {
  const { spring: e = { stiffness: 1e3, damping: 100 }, key: s } = $;
  return {
    in: () => ({
      spring: e,
      tick: () => {
      }
    }),
    out: () => ({
      spring: e,
      tick: () => {
      }
    }),
    ...s && { key: s }
  };
};
export {
  Y as blur,
  S as bounce,
  h as fade,
  M as fly,
  O as mask,
  V as none,
  k as rotate,
  d as scale,
  x as slide
};