51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import gsap from "gsap";
|
|
|
|
const DURATION = 0.11;
|
|
|
|
export const useMenuAnimation = (key: string, isOpen: Ref<boolean>) => {
|
|
const animation = useState(`animation-${key}`, () => ({
|
|
playing: false,
|
|
stage1Offset: 48,
|
|
stage2Offset: 48,
|
|
}));
|
|
|
|
watch(isOpen, (current, previous) => {
|
|
const timeline = gsap.timeline({
|
|
onStart: () => {
|
|
animation.value.playing = true;
|
|
},
|
|
onComplete: () => {
|
|
animation.value.playing = false;
|
|
},
|
|
});
|
|
|
|
if (current === true && previous === false) {
|
|
timeline
|
|
.fromTo(
|
|
animation.value,
|
|
{ stage1Offset: 48 },
|
|
{ stage1Offset: 0, ease: "none", duration: DURATION },
|
|
)
|
|
.fromTo(
|
|
animation.value,
|
|
{ stage2Offset: 48 },
|
|
{ stage2Offset: 0, ease: "none", duration: DURATION },
|
|
);
|
|
} else if (current === false && previous === true) {
|
|
timeline
|
|
.fromTo(
|
|
animation.value,
|
|
{ stage2Offset: 0 },
|
|
{ stage2Offset: 48, ease: "none", duration: DURATION },
|
|
)
|
|
.fromTo(
|
|
animation.value,
|
|
{ stage1Offset: 0 },
|
|
{ stage1Offset: 48, ease: "none", duration: DURATION },
|
|
);
|
|
}
|
|
});
|
|
|
|
return animation.value;
|
|
};
|