pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

font: tweak duration of some animations

Browse Source
This commit is contained in:
Stevan
2026-01-19 00:06:02 +01:00
parent 50e10498c9
commit d4377094b4
2 changed files with 8 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/composables/useMenuAnimation.ts
View File

@@ -1,5 +1,7 @@
import gsap from "gsap";
const DURATION = 0.11;
export const useMenuAnimation = (key: string, isOpen: Ref<boolean>) => {
const animation = useState(`animation-${key}`, () => ({
playing: false,
@@ -8,7 +10,6 @@ export const useMenuAnimation = (key: string, isOpen: Ref<boolean>) => {
}));
watch(isOpen, (current, previous) => {
const duration = 0.1;
const timeline = gsap.timeline({
onStart: () => {
animation.value.playing = true;
@@ -23,24 +24,24 @@ export const useMenuAnimation = (key: string, isOpen: Ref<boolean>) => {
.fromTo(
animation.value,
{ stage1Offset: 48 },
{ stage1Offset: 0, duration },
{ stage1Offset: 0, ease: "none", duration: DURATION },
)
.fromTo(
animation.value,
{ stage2Offset: 48 },
{ stage2Offset: 0, duration },
{ stage2Offset: 0, ease: "none", duration: DURATION },
);
} else if (current === false && previous === true) {
timeline
.fromTo(
animation.value,
{ stage2Offset: 0 },
{ stage2Offset: 48, duration },
{ stage2Offset: 48, ease: "none", duration: DURATION },
)
.fromTo(
animation.value,
{ stage1Offset: 0 },
{ stage1Offset: 48, duration },
{ stage1Offset: 48, ease: "none", duration: DURATION },
);
}
});