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

feat(nds): tweak animations durations

Browse Source
This commit is contained in:
Stevan
2026-02-26 14:58:46 +01:00
parent 3216d6e79e
commit eba1b8d84c
6 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/NDS2D.vue
View File

@@ -74,8 +74,6 @@ const TOP_SCREEN_OFFSET = 170;
const zoomStyle = computed(() => {
const scale = ndsScale.value * gallery.zoom.scale;
if (scale === 1) return { scale: ndsScale.value };
const y = TOP_SCREEN_OFFSET * ndsScale.value * (gallery.zoom.scale - 1);
return { transform: `translateY(${y}px) scale(${scale})` };
});

8
app/stores/contact.ts
View File

@@ -43,7 +43,7 @@ export const useContactStore = defineStore("contact", {
duration: 0.1,
ease: "none",
},
2,
1,
)
.fromTo(
this.intro,
@@ -53,7 +53,7 @@ export const useContactStore = defineStore("contact", {
duration: 0.1,
ease: "none",
},
2.15,
1.15,
)
.fromTo(
this.intro,
@@ -67,7 +67,7 @@ export const useContactStore = defineStore("contact", {
duration: 0.1,
ease: "none",
},
2.3,
1.3,
)
.call(() => {
this.isIntro = false;
@@ -104,7 +104,7 @@ export const useContactStore = defineStore("contact", {
this.isOutro = false;
const app = useAppStore();
app.navigateTo("home");
}, 2000);
}, 1000);
},
});

22
app/stores/gallery.ts
View File

@@ -11,12 +11,14 @@ const ANIMATION = {
NDS_CAMERA_ROTATION: new THREE.Euler(THREE.MathUtils.degToRad(-55), 0, 0),
GALLERY_CAMERA_POSITION: new THREE.Vector3(0, 4.5, -3),
GALLERY_CAMERA_ROTATION: new THREE.Euler(THREE.MathUtils.degToRad(-62), 0, 0),
CAMERA_DURATION: 3,
CAMERA_DURATION_INTRO: 2.115,
CAMERA_DURATION_OUTRO: 2.037,
CAMERA_ROTATION_OVERLAP: 0.1,
// 2D zoom
ZOOM_SCALE: 6,
ZOOM_DURATION: 3,
ZOOM_DURATION_INTRO: 2.115,
ZOOM_DURATION_OUTRO: 2.037,
ZOOM_EASE: "power2.inOut",
};
@@ -79,7 +81,7 @@ export const useGalleryStore = defineStore("gallery", {
x: ANIMATION.GALLERY_CAMERA_POSITION.x,
y: ANIMATION.GALLERY_CAMERA_POSITION.y,
z: ANIMATION.GALLERY_CAMERA_POSITION.z,
duration: ANIMATION.CAMERA_DURATION,
duration: ANIMATION.CAMERA_DURATION_INTRO,
delay: zoomDelay,
ease: ANIMATION.ZOOM_EASE,
},
@@ -97,7 +99,7 @@ export const useGalleryStore = defineStore("gallery", {
y: ANIMATION.GALLERY_CAMERA_ROTATION.y,
z: ANIMATION.GALLERY_CAMERA_ROTATION.z,
duration:
ANIMATION.CAMERA_DURATION *
ANIMATION.CAMERA_DURATION_INTRO *
(1 - ANIMATION.CAMERA_ROTATION_OVERLAP),
delay: zoomDelay,
ease: ANIMATION.ZOOM_EASE,
@@ -109,7 +111,7 @@ export const useGalleryStore = defineStore("gallery", {
{ scale: 1 },
{
scale: ANIMATION.ZOOM_SCALE,
duration: ANIMATION.ZOOM_DURATION,
duration: ANIMATION.ZOOM_DURATION_INTRO,
delay: zoomDelay,
ease: ANIMATION.ZOOM_EASE,
},
@@ -124,7 +126,7 @@ export const useGalleryStore = defineStore("gallery", {
setTimeout(() => {
const { assets } = useAssets();
assets.audio.whooshSmall.play(0.6);
}, 500);
}, 100);
},
animateOutro() {
@@ -135,7 +137,7 @@ export const useGalleryStore = defineStore("gallery", {
// Outro: Camera/zoom starts first (at 0), fade starts after with overlap
const fadeDelay =
ANIMATION.CAMERA_DURATION - ANIMATION.FADE_CAMERA_OVERLAP;
ANIMATION.CAMERA_DURATION_OUTRO - ANIMATION.FADE_CAMERA_OVERLAP;
if (app.camera) {
gsap.fromTo(
@@ -149,7 +151,7 @@ export const useGalleryStore = defineStore("gallery", {
x: ANIMATION.NDS_CAMERA_POSITION.x,
y: ANIMATION.NDS_CAMERA_POSITION.y,
z: ANIMATION.NDS_CAMERA_POSITION.z,
duration: ANIMATION.CAMERA_DURATION,
duration: ANIMATION.CAMERA_DURATION_OUTRO,
delay: 0,
ease: ANIMATION.ZOOM_EASE,
},
@@ -167,7 +169,7 @@ export const useGalleryStore = defineStore("gallery", {
y: ANIMATION.NDS_CAMERA_ROTATION.y,
z: ANIMATION.NDS_CAMERA_ROTATION.z,
duration:
ANIMATION.CAMERA_DURATION *
ANIMATION.CAMERA_DURATION_OUTRO *
(1 - ANIMATION.CAMERA_ROTATION_OVERLAP),
delay: 0,
ease: ANIMATION.ZOOM_EASE,
@@ -179,7 +181,7 @@ export const useGalleryStore = defineStore("gallery", {
{ scale: ANIMATION.ZOOM_SCALE },
{
scale: 1,
duration: ANIMATION.ZOOM_DURATION,
duration: ANIMATION.ZOOM_DURATION_OUTRO,
delay: 0,
ease: ANIMATION.ZOOM_EASE,
},

14
app/stores/home.ts
View File

@@ -67,7 +67,7 @@ export const useHomeStore = defineStore("home", {
{ stage1Opacity: 0 },
{
stage1Opacity: 1,
duration: 0.5,
duration: 0.35,
ease: "none",
},
0,
@@ -80,7 +80,7 @@ export const useHomeStore = defineStore("home", {
{ topScreenOpacity: 0 },
{
topScreenOpacity: 1,
duration: 0.5,
duration: 0.35,
ease: "none",
},
0,
@@ -90,10 +90,10 @@ export const useHomeStore = defineStore("home", {
{ statusBarY: -20 },
{
statusBarY: 0,
duration: 0.15,
duration: 0.1,
ease: "none",
},
0.35,
0.15,
);
} else {
this.intro.topScreenOpacity = 1;
@@ -139,7 +139,7 @@ export const useHomeStore = defineStore("home", {
{ stage2Opacity: 1 },
{
stage2Opacity: 0,
duration: 0.16,
duration: 0.12,
ease: "none",
},
0,
@@ -153,10 +153,10 @@ export const useHomeStore = defineStore("home", {
{
buttonOffsetY: -200,
stage1Opacity: 0,
duration: 0.4,
duration: 0.3,
ease: "none",
},
0.08,
0.06,
);
},
},

2
app/stores/intro.ts
View File

@@ -83,7 +83,7 @@ export const useIntroStore = defineStore("intro", {
.to(this.outro, {
backgroundOpacity: 1,
duration: 0.5,
delay: 0.5,
delay: 0.2,
ease: "none",
})
.call(() => {

22
app/stores/settings.ts
View File

@@ -185,21 +185,21 @@ export const useSettingsStore = defineStore("settings", {
.fromTo(
this.menuOffsets,
{ 1: -48 },
{ 1: 0, duration: 0.1, ease: "none" },
{ 1: 0, duration: 0.143, ease: "none" },
0.2,
)
.call(() => assets.audio.settingsMenuIntro.play(), undefined, 0.2)
.fromTo(
this.menuOffsets,
{ 2: -48 },
{ 2: 0, duration: 0.1, ease: "none" },
0.3,
{ 2: 0, duration: 0.143, ease: "none" },
0.343,
)
.fromTo(
this.menuOffsets,
{ 3: -48 },
{ 3: 0, duration: 0.1, ease: "none" },
0.4,
{ 3: 0, duration: 0.143, ease: "none" },
0.486,
)
.call(() => {
this.isIntro = false;
@@ -232,27 +232,27 @@ export const useSettingsStore = defineStore("settings", {
.fromTo(
this.menuOffsets,
{ 3: 0 },
{ 3: -48, duration: 0.1, ease: "none" },
{ 3: -48, duration: 0.143, ease: "none" },
0,
)
.fromTo(
this.menuOffsets,
{ 2: 0 },
{ 2: -48, duration: 0.1, ease: "none" },
0.1,
{ 2: -48, duration: 0.143, ease: "none" },
0.143,
)
.fromTo(
this.menuOffsets,
{ 1: 0 },
{ 1: -48, duration: 0.1, ease: "none" },
0.2,
{ 1: -48, duration: 0.143, ease: "none" },
0.286,
)
// menus slide down
.fromTo(
this,
{ menuYOffset: 0 },
{ menuYOffset: 72, duration: 0.2, ease: "none" },
0.3,
0.429,
)
.call(() => {
const app = useAppStore();