58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
export function initMorphMouth() {
|
|
const svg = document.querySelector(".identity svg");
|
|
if (!svg) return;
|
|
|
|
const lcMouth = svg.querySelector("#lc-mouth");
|
|
const rcMouth = svg.querySelector("#rc-mouth");
|
|
if (!lcMouth || !rcMouth) return;
|
|
|
|
gsap.registerPlugin(MorphSVGPlugin);
|
|
|
|
const lcMouthOrigin = lcMouth.getAttribute("d");
|
|
const rcMouthOrigin = rcMouth.getAttribute("d");
|
|
|
|
const DURATION = 0.3;
|
|
const EASE_IN = "elastic.out(1.3, 0.35)";
|
|
const EASE_OUT = "elastic.out(1.3, 0.35)";
|
|
const STAGGER = 0.06;
|
|
|
|
function morphToNoOutfit() {
|
|
gsap.to(lcMouth, {
|
|
morphSVG: "#lc-mouth-target",
|
|
fill: "black",
|
|
stroke: "transparent",
|
|
duration: DURATION,
|
|
ease: EASE_IN,
|
|
});
|
|
gsap.to(rcMouth, {
|
|
morphSVG: "#rc-mouth-target",
|
|
fill: "black",
|
|
stroke: "transparent",
|
|
duration: DURATION,
|
|
delay: STAGGER,
|
|
ease: EASE_IN,
|
|
});
|
|
}
|
|
|
|
function morphToKawai() {
|
|
gsap.to(lcMouth, {
|
|
morphSVG: lcMouthOrigin,
|
|
fill: "none",
|
|
stroke: "black",
|
|
duration: DURATION,
|
|
ease: EASE_OUT,
|
|
});
|
|
gsap.to(rcMouth, {
|
|
morphSVG: rcMouthOrigin,
|
|
fill: "none",
|
|
stroke: "black",
|
|
duration: DURATION,
|
|
delay: STAGGER,
|
|
ease: EASE_OUT,
|
|
});
|
|
}
|
|
|
|
const identity = document.querySelector(".identity");
|
|
identity.addEventListener("mouseenter", morphToNoOutfit);
|
|
identity.addEventListener("mouseleave", morphToKawai);
|
|
}
|