108 lines
2.6 KiB
JavaScript
108 lines
2.6 KiB
JavaScript
// GSAP logic as received
|
|
const items = document.querySelectorAll(".item");
|
|
const covers = document.querySelectorAll(".cover");
|
|
const actionButtons = document.querySelectorAll(".action-button");
|
|
const isMobile = window.innerWidth <= 768;
|
|
|
|
const expand = (item, i) => {
|
|
const cover = item.querySelector(".cover");
|
|
const button = item.querySelector(".action-button");
|
|
|
|
items.forEach((it, ind) => {
|
|
if (i === ind) return;
|
|
it.clicked = false;
|
|
const otherCover = it.querySelector(".cover");
|
|
const otherButton = it.querySelector(".action-button");
|
|
|
|
gsap.to(otherCover, { opacity: 1, duration: 0.8, ease: "power2.out" });
|
|
gsap.to(otherButton, {
|
|
opacity: 0,
|
|
y: 20,
|
|
duration: 0.5,
|
|
ease: "power2.out",
|
|
});
|
|
gsap.to(it, { scale: 1, rotationY: 0, duration: 0.8, ease: "power2.out" });
|
|
});
|
|
|
|
if (isMobile) {
|
|
gsap.to(items, {
|
|
height: item.clicked ? "18vh" : "12vh",
|
|
duration: 1.5,
|
|
ease: "elastic(1, .6)",
|
|
});
|
|
|
|
item.clicked = !item.clicked;
|
|
gsap.to(item, {
|
|
height: item.clicked ? "35vh" : "18vh",
|
|
duration: 2,
|
|
ease: "elastic(1, .3)",
|
|
scale: item.clicked ? 1.02 : 1,
|
|
});
|
|
} else {
|
|
gsap.to(items, {
|
|
width: item.clicked ? "18vw" : "12vw",
|
|
duration: 2,
|
|
ease: "elastic(1, .6)",
|
|
});
|
|
|
|
item.clicked = !item.clicked;
|
|
gsap.to(item, {
|
|
width: item.clicked ? "48vw" : "18vw",
|
|
duration: 2.5,
|
|
ease: "elastic(1, .3)",
|
|
scale: item.clicked ? 1.05 : 1,
|
|
rotationY: item.clicked ? 5 : 0,
|
|
});
|
|
}
|
|
|
|
gsap.to(cover, {
|
|
opacity: item.clicked ? 0 : 1,
|
|
duration: 0.8,
|
|
ease: "power2.out",
|
|
});
|
|
|
|
gsap.to(button, {
|
|
opacity: item.clicked ? 1 : 0,
|
|
y: item.clicked ? 0 : 20,
|
|
duration: item.clicked ? 0.8 : 0.5,
|
|
delay: item.clicked ? 0.3 : 0,
|
|
ease: "power2.out",
|
|
});
|
|
};
|
|
|
|
items.forEach((item, i) => {
|
|
item.clicked = false;
|
|
item.addEventListener("click", (e) => {
|
|
if (!e.target.closest(".action-button")) expand(item, i);
|
|
});
|
|
|
|
item.addEventListener("mouseenter", () => {
|
|
if (!item.clicked) {
|
|
gsap.to(item, { scale: 1.03, duration: 0.3, ease: "power2.out" });
|
|
}
|
|
});
|
|
|
|
item.addEventListener("mouseleave", () => {
|
|
if (!item.clicked) {
|
|
gsap.to(item, { scale: 1, duration: 0.3, ease: "power2.out" });
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
gsap.fromTo(
|
|
items,
|
|
{ opacity: 0, y: 50, scale: 0.8 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
duration: 1,
|
|
stagger: 0.2,
|
|
ease: "back.out(1.7)",
|
|
}
|
|
);
|
|
|
|
setTimeout(() => expand(items[0], 0), 1200);
|
|
});
|