34 lines
932 B
TypeScript
34 lines
932 B
TypeScript
import gsap from "gsap";
|
|
|
|
export const useMenuAnimation = (isOpen: Ref<boolean>) => {
|
|
const animation = reactive({
|
|
playing: false,
|
|
stage1Offset: 48,
|
|
stage2Offset: 48,
|
|
});
|
|
|
|
watch(isOpen, (current, previous) => {
|
|
const duration = 0.1;
|
|
const timeline = gsap.timeline({
|
|
onStart: () => {
|
|
animation.playing = true;
|
|
},
|
|
onComplete: () => {
|
|
animation.playing = false;
|
|
},
|
|
});
|
|
|
|
if (current === true && previous === false) {
|
|
timeline
|
|
.fromTo(animation, { stage1Offset: 48 }, { stage1Offset: 0, duration })
|
|
.fromTo(animation, { stage2Offset: 48 }, { stage2Offset: 0, duration });
|
|
} else if (current === false && previous === true) {
|
|
timeline
|
|
.fromTo(animation, { stage2Offset: 0 }, { stage2Offset: 48, duration })
|
|
.fromTo(animation, { stage1Offset: 0 }, { stage1Offset: 48, duration });
|
|
}
|
|
});
|
|
|
|
return animation;
|
|
};
|