@ssgoi/core
Version:
Core animation engine for SSGOI - Native app-like page transitions with spring physics
238 lines (237 loc) • 6.83 kB
JavaScript
const $ = (p = {}) => {
const {
from: n = 0,
to: e = 1,
spring: r = { stiffness: 300, damping: 30 }
} = p;
return {
in: (u) => ({
spring: r,
tick: (l) => {
const c = n + (e - n) * l;
u.style.opacity = c.toString();
}
}),
out: (u) => ({
spring: r,
tick: (l) => {
const c = n + (e - n) * l;
u.style.opacity = c.toString();
}
})
};
}, m = (p = {}) => {
const {
start: n = 0,
opacity: e = 0,
axis: r = "both",
spring: u = { stiffness: 300, damping: 30 }
} = p, l = (c) => {
switch (r) {
case "x":
return `scaleX(${c})`;
case "y":
return `scaleY(${c})`;
case "both":
default:
return `scale(${c})`;
}
};
return {
in: (c) => ({
spring: u,
tick: (t) => {
const s = n + (1 - n) * t;
c.style.transform = l(s), c.style.opacity = (e + (1 - e) * t).toString();
}
}),
out: (c) => ({
spring: u,
tick: (t) => {
const s = n + (1 - n) * t;
c.style.transform = l(s), c.style.opacity = (e + (1 - e) * t).toString();
}
})
};
}, b = (p = {}) => {
const {
direction: n,
distance: e = 100,
opacity: r = 0,
fade: u = !0,
axis: l,
spring: c = { stiffness: 400, damping: 35 }
} = p, s = n || (l === "x" ? "left" : l === "y" ? "up" : "left"), o = (a) => typeof a == "number" ? `${a}px` : a, f = (a) => {
const i = 1 - a, y = typeof e == "number" ? i * e : `calc(${o(e)} * ${i})`;
switch (s) {
case "left":
return typeof e == "number" ? `translateX(${-y}px)` : `translateX(calc(-1 * ${y}))`;
case "right":
return typeof e == "number" ? `translateX(${y}px)` : `translateX(${y})`;
case "up":
return typeof e == "number" ? `translateY(${-y}px)` : `translateY(calc(-1 * ${y}))`;
case "down":
return typeof e == "number" ? `translateY(${y}px)` : `translateY(${y})`;
}
};
return {
in: (a) => ({
spring: c,
tick: (i) => {
a.style.transform = f(i), u && (a.style.opacity = (r + (1 - r) * i).toString());
}
}),
out: (a) => ({
spring: c,
tick: (i) => {
a.style.transform = f(i), u && (a.style.opacity = (r + (1 - r) * i).toString());
}
})
};
}, x = (p = {}) => {
const {
degrees: n = 360,
clockwise: e = !0,
scale: r = !1,
fade: u = !0,
origin: l = "center",
axis: c = "2d",
perspective: t = 800,
spring: s = { stiffness: 500, damping: 25 }
} = p, o = e ? n : -n, f = (a) => {
const i = (1 - a) * o;
switch (c) {
case "x":
return `perspective(${t}px) rotateX(${i}deg)`;
case "y":
return `perspective(${t}px) rotateY(${i}deg)`;
case "z":
return `rotateZ(${i}deg)`;
case "2d":
default:
return `rotate(${i}deg)`;
}
};
return {
in: (a) => ({
spring: s,
tick: (i) => {
const y = [f(i)];
r && y.push(`scale(${i})`), a.style.transform = y.join(" "), a.style.transformOrigin = l, u && (a.style.opacity = i.toString());
}
}),
out: (a) => ({
spring: s,
tick: (i) => {
const y = [f(i)];
r && y.push(`scale(${i})`), a.style.transform = y.join(" "), a.style.transformOrigin = l, u && (a.style.opacity = i.toString());
}
})
};
}, d = (p = {}) => {
const {
height: n = 20,
intensity: e = 1,
scale: r = !0,
fade: u = !0,
direction: l = "up",
spring: c = { stiffness: 800, damping: 15 }
} = p;
return {
in: (t) => ({
spring: c,
tick: (s) => {
const o = [], f = Math.sin(s * Math.PI * (1 + e)), a = 1 - s, i = f * n * a;
if (l === "up" ? o.push(`translateY(${-Math.abs(i)}px)`) : o.push(`translateY(${Math.abs(i)}px)`), r) {
const y = 0.8 + s * 0.2 + f * 0.05 * a;
o.push(`scale(${y})`);
}
t.style.transform = o.join(" "), u && (t.style.opacity = s.toString());
}
}),
out: (t) => ({
spring: c,
tick: (s) => {
const o = [], f = Math.sin(s * Math.PI * (1 + e)), a = 1 - s, i = f * n * a;
if (l === "up" ? o.push(`translateY(${-Math.abs(i)}px)`) : o.push(`translateY(${Math.abs(i)}px)`), r) {
const y = 0.8 + s * 0.2 + f * 0.05 * a;
o.push(`scale(${y})`);
}
t.style.transform = o.join(" "), u && (t.style.opacity = s.toString());
}
})
};
}, g = (p = {}) => {
const {
amount: n = 10,
opacity: e = 0,
scale: r = !1,
fade: u = !0,
spring: l = { stiffness: 300, damping: 30 }
} = p, c = (t) => typeof t == "number" ? `${t}px` : t;
return {
in: (t) => ({
spring: l,
tick: (s) => {
const o = 1 - s, f = typeof n == "number" ? o * n : `calc(${c(n)} * ${o})`;
t.style.filter = typeof n == "number" ? `blur(${f}px)` : `blur(${f})`, r && (t.style.transform = `scale(${0.8 + s * 0.2})`), u && (t.style.opacity = (e + (1 - e) * s).toString());
}
}),
out: (t) => ({
spring: l,
tick: (s) => {
const o = 1 - s, f = typeof n == "number" ? o * n : `calc(${c(n)} * ${o})`;
t.style.filter = typeof n == "number" ? `blur(${f}px)` : `blur(${f})`, r && (t.style.transform = `scale(${0.8 + s * 0.2})`), u && (t.style.opacity = (e + (1 - e) * s).toString());
}
})
};
}, h = (p = {}) => {
const {
x: n = 0,
y: e = -100,
opacity: r = 0,
spring: u = { stiffness: 400, damping: 35 }
} = p, l = (t) => typeof t == "number" ? `${t}px` : t, c = (t) => typeof t == "number" ? `${t}px` : t;
return {
in: (t) => ({
spring: u,
tick: (s) => {
const o = typeof n == "number" ? (1 - s) * n : `calc(${l(n)} * ${1 - s})`, f = typeof e == "number" ? (1 - s) * e : `calc(${c(e)} * ${1 - s})`;
t.style.transform = `translate(${typeof n == "number" ? o + "px" : o}, ${typeof e == "number" ? f + "px" : f})`, t.style.opacity = (r + (1 - r) * s).toString();
}
}),
out: (t) => ({
spring: u,
tick: (s) => {
const o = typeof n == "number" ? (1 - s) * n : `calc(${l(n)} * ${1 - s})`, f = typeof e == "number" ? (1 - s) * e : `calc(${c(e)} * ${1 - s})`;
t.style.transform = `translate(${typeof n == "number" ? o + "px" : o}, ${typeof e == "number" ? f + "px" : f})`, t.style.opacity = (r + (1 - r) * s).toString();
}
})
};
}, k = (p = {}) => {
const {
spring: n = { stiffness: 1e3, damping: 100 }
} = p;
return {
in: (e) => ({
spring: n,
tick: (r) => {
}
}),
out: (e) => ({
spring: n,
tick: (r) => {
}
})
};
};
export {
g as blur,
d as bounce,
$ as fade,
h as fly,
k as none,
x as rotate,
m as scale,
b as slide
};