clickstyles
Version:
A collection of animated styles for buttons, CTAs, links, cards, toggles, and other interactive UI elements.
223 lines (222 loc) • 8.33 kB
JavaScript
/* empty css */
document.querySelectorAll(".cs__btn-expand-reveal").forEach((button2) => {
const baseText = button2.textContent.trim();
const suffixText = button2.dataset.csBtnSuffix || "";
button2.textContent = "";
const inner = document.createElement("span");
inner.classList.add("cs__btn-inner");
const staticPart = document.createElement("span");
staticPart.classList.add("cs__btn-static");
staticPart.textContent = baseText;
const animatedWrapper = document.createElement("span");
animatedWrapper.classList.add("cs__btn-animated");
animatedWrapper.style.width = "0";
const spaceSpan = document.createElement("span");
spaceSpan.textContent = " ";
spaceSpan.classList.add("cs__btn-space");
animatedWrapper.appendChild(spaceSpan);
suffixText.split("").forEach((char) => {
const span = document.createElement("span");
span.textContent = char;
animatedWrapper.appendChild(span);
});
inner.appendChild(staticPart);
inner.appendChild(animatedWrapper);
button2.appendChild(inner);
const letters = animatedWrapper.querySelectorAll("span:not(.cs__btn-space)");
const showExtra = () => {
gsap.killTweensOf(animatedWrapper);
gsap.killTweensOf(letters);
const fullWidth = animatedWrapper.scrollWidth;
gsap.to(animatedWrapper, {
width: fullWidth,
duration: 0.3,
ease: "power2.out",
overwrite: true
// Ensure only this width animation runs for animatedWrapper
});
gsap.to(letters, {
y: 0,
opacity: 1,
rotationZ: 0,
duration: 0.3,
stagger: { each: 0.05, from: "start" },
ease: "back.out(1.7)",
overwrite: true
// Ensure only these letter animations run for letters
});
};
const hideExtra = () => {
gsap.killTweensOf(animatedWrapper);
gsap.killTweensOf(letters);
gsap.to(letters, {
y: 30,
opacity: 0,
rotationZ: -30,
duration: 0.2,
stagger: { each: 0.04, from: "end" },
ease: "power2.in",
overwrite: true
// Ensure only these letter animations run for letters
});
gsap.to(animatedWrapper, {
width: 0,
duration: 0.2,
delay: 0.1,
ease: "power2.inOut",
overwrite: true
// Ensure only this width animation runs for animatedWrapper
});
};
button2.addEventListener("mouseenter", showExtra);
button2.addEventListener("mouseleave", hideExtra);
});
const __vite_glob_0_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const magneticBtn = document.querySelector(".cs__btn-magnetic");
magneticBtn.addEventListener("mousemove", (e) => {
const rect = magneticBtn.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 3;
const y = e.clientY - rect.top - rect.height / 3;
gsap.to(magneticBtn, {
x: x * 0.4,
y: y * 0.4,
duration: 0.3,
ease: "power2.out"
});
});
magneticBtn.addEventListener("mouseleave", () => {
gsap.to(magneticBtn, { x: 0, y: 0, duration: 0.3, ease: "power2.out" });
});
const __vite_glob_0_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const pressBtn = document.querySelector(".cs__btn-press-bounce");
pressBtn.addEventListener("mousedown", () => {
gsap.to(pressBtn, { scale: 0.9, duration: 0.1 });
});
pressBtn.addEventListener("mouseup", () => {
gsap.to(pressBtn, {
scale: 1.05,
duration: 0.15,
ease: "elastic.out(1, 0.5)"
});
});
pressBtn.addEventListener("mouseleave", () => {
gsap.to(pressBtn, { scale: 1, duration: 0.2 });
});
const __vite_glob_0_2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const pulseBtn = document.querySelector(".cs__btn-pulse-pop");
pulseBtn.addEventListener("mouseenter", () => {
gsap.to(pulseBtn, { scale: 1.1, duration: 0.2, ease: "power1.out" });
});
pulseBtn.addEventListener("mouseleave", () => {
gsap.to(pulseBtn, { scale: 1, duration: 0.2, ease: "power1.inOut" });
});
const __vite_glob_0_3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const rippleBtns = document.querySelectorAll(".ripple-btn");
rippleBtns.forEach((btn) => {
btn.addEventListener("mouseenter", () => {
btn.querySelector("::before");
gsap.to(btn, { scale: 1.1, duration: 0.3 });
});
btn.addEventListener("mouseleave", () => {
gsap.to(btn, { scale: 1, duration: 0.3 });
});
});
const __vite_glob_0_4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const button = document.querySelector(".ca__btn-shine");
const shine$1 = button.querySelector(".ca__btn-shine_effect");
const tl = gsap.timeline({ paused: true });
tl.to(button, {
scale: 1.08,
// Scale up slightly
backgroundColor: "#007bff",
// New background color (a vibrant blue)
boxShadow: "0 8px 25px rgba(0, 0, 0, 0.4)",
// More pronounced shadow
duration: 0.3,
// How long this part of the animation takes
ease: "power2.out",
// Easing function for a smoother feel
overwrite: "auto"
// Ensures smooth transitions if rapidly hovered
}).to(
shine$1,
{
x: "200%",
// Move the shine from left (-100%) to right (100% of its width)
opacity: 1,
// Make the shine visible
duration: 0.6,
// How long the shine animation takes
ease: "power1.inOut"
// Easing for the shine
},
"<0.1"
);
button.addEventListener("mouseenter", () => tl.play());
button.addEventListener("mouseleave", () => tl.reverse());
const __vite_glob_0_5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const shineBtn = document.querySelector(".cs__btn-shine");
const shine = shineBtn.querySelector(".cs__shine");
shineBtn.addEventListener("mouseenter", () => {
gsap.fromTo(
shine,
{ left: "-75%" },
{ left: "125%", duration: 1, ease: "power2.inOut" }
);
});
const __vite_glob_0_6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const slideBtn = document.querySelector(".cs__btn-slideIn-bounce span");
slideBtn.parentElement.addEventListener("mouseenter", () => {
gsap.fromTo(
slideBtn,
{ y: "100%" },
{ y: "0%", duration: 0.5, ease: "bounce.out" }
);
});
const __vite_glob_0_7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const VARIANT_MAP = {
pink: "conic-gradient(#ff6ec4, #fcb1ff, #ff6ec4)",
neon: "conic-gradient(#00f0ff, #39ff14, #00f0ff)",
aqua: "conic-gradient(#00c9ff, #92fe9d, #00c9ff)",
fire: "conic-gradient(#ff4e50, #f9d423, #ff4e50)",
rainbow: "conic-gradient(red, orange, yellow, green, blue, indigo, violet, red)"
};
document.querySelectorAll(".cs__btn-spin-bg").forEach((btn) => {
const ring = btn.querySelector(".cs__btn-spin-bg__ring");
const variant = btn.dataset.variant || "pink";
ring.style.background = VARIANT_MAP[variant] || VARIANT_MAP.rainbow;
let spinTween;
btn.addEventListener("mouseenter", () => {
spinTween = gsap.to(ring, {
rotate: 360,
duration: 3,
repeat: -1,
ease: "none"
});
});
btn.addEventListener("mouseleave", () => {
if (spinTween) spinTween.kill();
gsap.set(ring, { rotate: 0 });
});
});
const __vite_glob_0_8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const modules = /* @__PURE__ */ Object.assign({ "./animations/button/expand-reveal.js": __vite_glob_0_0, "./animations/button/magnetic.js": __vite_glob_0_1, "./animations/button/press-bounce.js": __vite_glob_0_2, "./animations/button/pulse-pop.js": __vite_glob_0_3, "./animations/button/ripple.js": __vite_glob_0_4, "./animations/button/shine.js": __vite_glob_0_5, "./animations/button/shiny.js": __vite_glob_0_6, "./animations/button/slideIn.js": __vite_glob_0_7, "./animations/button/spin-bg.js": __vite_glob_0_8 });
console.log("Loaded animation modules:", modules);