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

feat(settings): intro and outro animation

Browse Source
This commit is contained in:
Stevan
2026-02-05 20:44:19 +01:00
parent 098285ee82
commit 1236e86981
10 changed files with 306 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/stores/home.ts
View File

@@ -13,6 +13,7 @@ export const useHomeStore = defineStore("home", {
intro: {
statusBarY: -20,
stage1Opacity: 0,
topScreenOpacity: 0,
},
outro: {
@@ -44,33 +45,51 @@ export const useHomeStore = defineStore("home", {
animateIntro() {
this.isIntro = true;
const app = useAppStore();
const timeline = gsap.timeline({
onComplete: () => {
this.isIntro = false;
},
});
timeline
.fromTo(
this.intro,
{ stage1Opacity: 0 },
{
stage1Opacity: 1,
duration: 0.5,
ease: "none",
},
0,
)
.fromTo(
this.intro,
{ statusBarY: -20 },
{
statusBarY: 0,
duration: 0.15,
ease: "none",
},
0.35,
);
timeline.fromTo(
this.intro,
{ stage1Opacity: 0 },
{
stage1Opacity: 1,
duration: 0.5,
ease: "none",
},
0,
);
if (app.previousScreen !== "settings") {
timeline
.fromTo(
this.intro,
{ topScreenOpacity: 0 },
{
topScreenOpacity: 1,
duration: 0.5,
ease: "none",
},
0,
)
.fromTo(
this.intro,
{ statusBarY: -20 },
{
statusBarY: 0,
duration: 0.15,
ease: "none",
},
0.35,
);
} else {
this.intro.topScreenOpacity = 1;
this.intro.statusBarY = 0;
}
},
animateOutro(to: AppScreen) {