anim8-core
Version:
Custom JavaScript animation library with modular effects
257 lines (256 loc) • 6.13 kB
JavaScript
function f(e, t, n = {}) {
const {
duration: s = 1e3,
easing: r,
delay: o = 0
} = n, l = typeof r == "function" ? r : (a) => a, d = performance.now(), g = ["translateX", "translateY", "scale", "rotate"];
for (const a in t)
t[a][0];
function h(a) {
const u = [];
for (const c in t) {
const [v, T] = t[c], k = l(a), m = v + (T - v) * k;
g.includes(c) ? c === "translateX" || c === "translateY" ? u.push(`${c}(${m}px)`) : c === "scale" ? u.push(`scale(${m})`) : c === "rotate" && u.push(`rotate(${m}deg)`) : e.style[c] = typeof m == "number" ? `${m}` : m;
}
u.length > 0 && (e.style.transform = u.join(" "));
}
function y(a) {
const u = a - d;
if (u < o) {
requestAnimationFrame(y);
return;
}
const c = Math.min((u - o) / s, 1);
h(c), c < 1 && requestAnimationFrame(y);
}
requestAnimationFrame(y);
}
function i(e, { all: t = !1 } = {}) {
if (typeof e == "string") {
const n = t ? document.querySelectorAll(e) : document.querySelector(e);
return !n || t && n.length === 0 ? (console.warn(`resolveElement: No element(s) found for selector "${e}"`), t ? [] : null) : t ? Array.from(n) : n;
}
return e instanceof HTMLElement ? t ? [e] : e : (console.warn("resolveElement: Invalid target provided", e), t ? [] : null);
}
function p(e) {
return e === 1 ? 1 : 1 - Math.pow(2, -10 * e);
}
function b(e, t = {}) {
const n = i(e);
n && f(n, { opacity: [0, 1] }, {
duration: t.duration || 800,
easing: t.easing || p,
delay: t.delay || 0
});
}
function E(e, t = "left", n = 200) {
const s = i(e);
if (!s) return;
let r, o;
switch (t) {
case "right":
r = "translateX", o = n;
break;
case "top":
r = "translateY", o = -n;
break;
case "bottom":
r = "translateY", o = n;
break;
case "left":
default:
r = "translateX", o = -n;
}
f(s, {
[r]: [o, 0],
opacity: [0, 1]
}, {
duration: 800,
easing: p
});
}
function w(e) {
const t = i(e);
t && f(t, {
rotate: [0, 360]
}, {
duration: 1e3,
easing: p
});
}
function $(e) {
const t = i(e);
t && f(t, {
rotate: [0, 360],
scale: [0.5, 1]
}, {
duration: 1e3,
easing: p
});
}
const x = (e, t = {}) => {
const n = i(e, { all: !0 });
if (!n.length) return;
const s = new IntersectionObserver((r, o) => {
r.forEach((l) => {
l.isIntersecting && (l.target.classList.add("animate-scrollReveal"), t.once !== !1 && o.unobserve(l.target));
});
});
n.forEach((r) => {
s.observe(r);
});
};
function q(e, t = {}) {
const n = document.querySelectorAll(e), {
delay: s = 100,
pulseScale: r = 1.3,
pulseDuration: o = 150,
letterDelay: l = 60
} = t;
n.forEach((d) => {
const g = d.textContent.trim();
d.textContent = "", d.style.display = "inline-block", [...g].forEach((h, y) => {
const a = document.createElement("span");
a.textContent = h, a.style.display = "inline-block", a.style.opacity = 0, a.style.transition = `transform ${o}ms ease, opacity 300ms ease`, d.appendChild(a), setTimeout(() => {
a.style.opacity = 1, a.style.transform = `scale(${r})`, setTimeout(() => {
a.style.transform = "scale(1)";
}, o);
}, s + y * l);
});
});
}
function A(e) {
const t = i(e);
if (!t) return;
t.querySelectorAll(".nav-item").forEach((s) => {
s.addEventListener("mouseenter", () => {
s.classList.add("active-gooey");
}), s.addEventListener("mouseleave", () => {
s.classList.remove("active-gooey");
});
});
}
function S(e, t = {}) {
const {
direction: n = "left",
// 'left', 'right', 'top', 'bottom'
duration: s = 1e3,
easing: r = "ease"
} = t, o = i(e);
if (!o) return;
o.style.transition = `transform ${s}ms ${r}, opacity ${s}ms ${r}`, o.style.opacity = "0";
const l = {
left: "translateX(-100%)",
right: "translateX(100%)",
top: "translateY(-100%)",
bottom: "translateY(100%)"
};
o.style.transform = l[n] || l.left;
}
function I(e, t = {}) {
let n;
if (typeof e == "string")
n = document.querySelectorAll(e);
else {
const s = i(e);
if (!s) return;
n = [s];
}
n.forEach((s) => {
f(s, {
opacity: [0, 1],
transform: ["scale(0.8) translateZ(-200px)", "scale(1) translateZ(0)"]
}, {
duration: t.duration || 700,
easing: t.easing || "ease-out",
delay: t.delay || 0
});
});
}
function L(e, t, n = {}) {
const s = i(e, { all: !0 });
s.length && s.forEach((r, o) => {
setTimeout(() => {
t(r, n);
}, (n.staggerDelay || 100) * o);
});
}
function X(e, t = {}) {
let n;
if (typeof e == "string")
n = document.querySelectorAll(e);
else {
const s = i(e);
if (!s) return;
n = [s];
}
n.forEach((s) => {
f(s, {
opacity: [0, 1],
filter: ["blur(10px)", "blur(0)"]
}, {
duration: t.duration || 600,
easing: t.easing || "ease-out",
delay: t.delay || 0
});
});
}
function Y(e, t, n = {}) {
const s = typeof e == "string" ? document.querySelectorAll(e) : [e], r = new IntersectionObserver((o) => {
o.forEach((l) => {
l.isIntersecting && (t(l.target), r.unobserve(l.target));
});
}, n);
s.forEach((o) => {
r.observe(o);
});
}
const C = {
fadeIn: b,
slideIn: E,
rotate: w,
rotateScale: $,
scrollReveal: x,
typewriterPulse: q,
gooeyNav: A,
slideOut: S,
depthZoom: I,
stagger: L,
blurIn: X,
scrollTrigger: Y,
animate: f,
resolveElement: i
};
typeof window < "u" && (window.anim8 = {
fadeIn: b,
slideIn: E,
rotate: w,
rotateScale: $,
scrollReveal: x,
typewriterPulse: q,
gooeyNav: A,
slideOut: S,
depthZoom: I,
stagger: L,
blurIn: X,
scrollTrigger: Y,
animate: f,
resolveElement: i
});
export {
f as animate,
X as blurIn,
C as default,
I as depthZoom,
b as fadeIn,
A as gooeyNav,
i as resolveElement,
w as rotate,
$ as rotateScale,
x as scrollReveal,
Y as scrollTrigger,
E as slideIn,
S as slideOut,
L as stagger,
q as typewriterPulse
};