93 lines
1.6 KiB
TypeScript
93 lines
1.6 KiB
TypeScript
import gsap from "gsap";
|
|
|
|
export const useHomeStore = defineStore("home", {
|
|
state: () => ({
|
|
intro: {
|
|
statusBarY: -20,
|
|
stage1Opacity: 0,
|
|
},
|
|
|
|
outro: {
|
|
buttonOffsetY: 0,
|
|
stage1Opacity: 1,
|
|
stage2Opacity: 1,
|
|
},
|
|
|
|
isIntro: false,
|
|
isOutro: false,
|
|
}),
|
|
|
|
actions: {
|
|
animateIntro() {
|
|
this.isIntro = true;
|
|
|
|
const start = 0.5;
|
|
const duration = 0.5;
|
|
const delay = 0.35;
|
|
|
|
gsap.fromTo(
|
|
this.intro,
|
|
{ stage1Opacity: 0 },
|
|
{
|
|
stage1Opacity: 1,
|
|
duration,
|
|
delay: start,
|
|
ease: "none",
|
|
onComplete: () => {
|
|
this.isIntro = false;
|
|
},
|
|
},
|
|
);
|
|
|
|
gsap.fromTo(
|
|
this.intro,
|
|
{ statusBarY: -20 },
|
|
{
|
|
statusBarY: 0,
|
|
duration: duration - delay,
|
|
delay: start + delay,
|
|
ease: "none",
|
|
},
|
|
);
|
|
},
|
|
|
|
animateOutro(to?: string) {
|
|
this.isOutro = true;
|
|
|
|
const duration = 0.4;
|
|
const delay = 0.08;
|
|
|
|
gsap.fromTo(
|
|
this.outro,
|
|
{
|
|
buttonOffsetY: 0,
|
|
stage1Opacity: 1,
|
|
},
|
|
{
|
|
buttonOffsetY: -200,
|
|
stage1Opacity: 0,
|
|
duration,
|
|
delay,
|
|
ease: "none",
|
|
onComplete: () => {
|
|
this.isOutro = true;
|
|
if (to) navigateTo(to);
|
|
},
|
|
},
|
|
);
|
|
|
|
gsap.fromTo(
|
|
this.outro,
|
|
{
|
|
stage2Opacity: 1,
|
|
},
|
|
{
|
|
stage2Opacity: 0,
|
|
ease: "none",
|
|
duration: duration / 2 - delay,
|
|
},
|
|
);
|
|
},
|
|
},
|
|
});
|