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 3c80db115f
commit 94d94fdef0
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 zoomStyle = computed(() => {
const scale = ndsScale.value * gallery.zoom.scale; 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); const y = TOP_SCREEN_OFFSET * ndsScale.value * (gallery.zoom.scale - 1);
return { transform: `translateY(${y}px) scale(${scale})` }; 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, duration: 0.1,
ease: "none", ease: "none",
}, },
2, 1,
) )
.fromTo( .fromTo(
this.intro, this.intro,
@@ -53,7 +53,7 @@ export const useContactStore = defineStore("contact", {
duration: 0.1, duration: 0.1,
ease: "none", ease: "none",
}, },
2.15, 1.15,
) )
.fromTo( .fromTo(
this.intro, this.intro,
@@ -67,7 +67,7 @@ export const useContactStore = defineStore("contact", {
duration: 0.1, duration: 0.1,
ease: "none", ease: "none",
}, },
2.3, 1.3,
) )
.call(() => { .call(() => {
this.isIntro = false; this.isIntro = false;
@@ -104,7 +104,7 @@ export const useContactStore = defineStore("contact", {
this.isOutro = false; this.isOutro = false;
const app = useAppStore(); const app = useAppStore();
app.navigateTo("home"); 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), NDS_CAMERA_ROTATION: new THREE.Euler(THREE.MathUtils.degToRad(-55), 0, 0),
GALLERY_CAMERA_POSITION: new THREE.Vector3(0, 4.5, -3), GALLERY_CAMERA_POSITION: new THREE.Vector3(0, 4.5, -3),
GALLERY_CAMERA_ROTATION: new THREE.Euler(THREE.MathUtils.degToRad(-62), 0, 0), 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, CAMERA_ROTATION_OVERLAP: 0.1,
// 2D zoom // 2D zoom
ZOOM_SCALE: 6, ZOOM_SCALE: 6,
ZOOM_DURATION: 3, ZOOM_DURATION_INTRO: 2.115,
ZOOM_DURATION_OUTRO: 2.037,
ZOOM_EASE: "power2.inOut", ZOOM_EASE: "power2.inOut",
}; };
@@ -79,7 +81,7 @@ export const useGalleryStore = defineStore("gallery", {
x: ANIMATION.GALLERY_CAMERA_POSITION.x, x: ANIMATION.GALLERY_CAMERA_POSITION.x,
y: ANIMATION.GALLERY_CAMERA_POSITION.y, y: ANIMATION.GALLERY_CAMERA_POSITION.y,
z: ANIMATION.GALLERY_CAMERA_POSITION.z, z: ANIMATION.GALLERY_CAMERA_POSITION.z,
duration: ANIMATION.CAMERA_DURATION, duration: ANIMATION.CAMERA_DURATION_INTRO,
delay: zoomDelay, delay: zoomDelay,
ease: ANIMATION.ZOOM_EASE, ease: ANIMATION.ZOOM_EASE,
}, },
@@ -97,7 +99,7 @@ export const useGalleryStore = defineStore("gallery", {
y: ANIMATION.GALLERY_CAMERA_ROTATION.y, y: ANIMATION.GALLERY_CAMERA_ROTATION.y,
z: ANIMATION.GALLERY_CAMERA_ROTATION.z, z: ANIMATION.GALLERY_CAMERA_ROTATION.z,
duration: duration:
ANIMATION.CAMERA_DURATION * ANIMATION.CAMERA_DURATION_INTRO *
(1 - ANIMATION.CAMERA_ROTATION_OVERLAP), (1 - ANIMATION.CAMERA_ROTATION_OVERLAP),
delay: zoomDelay, delay: zoomDelay,
ease: ANIMATION.ZOOM_EASE, ease: ANIMATION.ZOOM_EASE,
@@ -109,7 +111,7 @@ export const useGalleryStore = defineStore("gallery", {
{ scale: 1 }, { scale: 1 },
{ {
scale: ANIMATION.ZOOM_SCALE, scale: ANIMATION.ZOOM_SCALE,
duration: ANIMATION.ZOOM_DURATION, duration: ANIMATION.ZOOM_DURATION_INTRO,
delay: zoomDelay, delay: zoomDelay,
ease: ANIMATION.ZOOM_EASE, ease: ANIMATION.ZOOM_EASE,
}, },
@@ -124,7 +126,7 @@ export const useGalleryStore = defineStore("gallery", {
setTimeout(() => { setTimeout(() => {
const { assets } = useAssets(); const { assets } = useAssets();
assets.audio.whooshSmall.play(0.6); assets.audio.whooshSmall.play(0.6);
}, 500); }, 100);
}, },
animateOutro() { animateOutro() {
@@ -135,7 +137,7 @@ export const useGalleryStore = defineStore("gallery", {
// Outro: Camera/zoom starts first (at 0), fade starts after with overlap // Outro: Camera/zoom starts first (at 0), fade starts after with overlap
const fadeDelay = const fadeDelay =
ANIMATION.CAMERA_DURATION - ANIMATION.FADE_CAMERA_OVERLAP; ANIMATION.CAMERA_DURATION_OUTRO - ANIMATION.FADE_CAMERA_OVERLAP;
if (app.camera) { if (app.camera) {
gsap.fromTo( gsap.fromTo(
@@ -149,7 +151,7 @@ export const useGalleryStore = defineStore("gallery", {
x: ANIMATION.NDS_CAMERA_POSITION.x, x: ANIMATION.NDS_CAMERA_POSITION.x,
y: ANIMATION.NDS_CAMERA_POSITION.y, y: ANIMATION.NDS_CAMERA_POSITION.y,
z: ANIMATION.NDS_CAMERA_POSITION.z, z: ANIMATION.NDS_CAMERA_POSITION.z,
duration: ANIMATION.CAMERA_DURATION, duration: ANIMATION.CAMERA_DURATION_OUTRO,
delay: 0, delay: 0,
ease: ANIMATION.ZOOM_EASE, ease: ANIMATION.ZOOM_EASE,
}, },
@@ -167,7 +169,7 @@ export const useGalleryStore = defineStore("gallery", {
y: ANIMATION.NDS_CAMERA_ROTATION.y, y: ANIMATION.NDS_CAMERA_ROTATION.y,
z: ANIMATION.NDS_CAMERA_ROTATION.z, z: ANIMATION.NDS_CAMERA_ROTATION.z,
duration: duration:
ANIMATION.CAMERA_DURATION * ANIMATION.CAMERA_DURATION_OUTRO *
(1 - ANIMATION.CAMERA_ROTATION_OVERLAP), (1 - ANIMATION.CAMERA_ROTATION_OVERLAP),
delay: 0, delay: 0,
ease: ANIMATION.ZOOM_EASE, ease: ANIMATION.ZOOM_EASE,
@@ -179,7 +181,7 @@ export const useGalleryStore = defineStore("gallery", {
{ scale: ANIMATION.ZOOM_SCALE }, { scale: ANIMATION.ZOOM_SCALE },
{ {
scale: 1, scale: 1,
duration: ANIMATION.ZOOM_DURATION, duration: ANIMATION.ZOOM_DURATION_OUTRO,
delay: 0, delay: 0,
ease: ANIMATION.ZOOM_EASE, ease: ANIMATION.ZOOM_EASE,
}, },

14
app/stores/home.ts
View File

@@ -67,7 +67,7 @@ export const useHomeStore = defineStore("home", {
{ stage1Opacity: 0 }, { stage1Opacity: 0 },
{ {
stage1Opacity: 1, stage1Opacity: 1,
duration: 0.5, duration: 0.35,
ease: "none", ease: "none",
}, },
0, 0,
@@ -80,7 +80,7 @@ export const useHomeStore = defineStore("home", {
{ topScreenOpacity: 0 }, { topScreenOpacity: 0 },
{ {
topScreenOpacity: 1, topScreenOpacity: 1,
duration: 0.5, duration: 0.35,
ease: "none", ease: "none",
}, },
0, 0,
@@ -90,10 +90,10 @@ export const useHomeStore = defineStore("home", {
{ statusBarY: -20 }, { statusBarY: -20 },
{ {
statusBarY: 0, statusBarY: 0,
duration: 0.15, duration: 0.1,
ease: "none", ease: "none",
}, },
0.35, 0.15,
); );
} else { } else {
this.intro.topScreenOpacity = 1; this.intro.topScreenOpacity = 1;
@@ -139,7 +139,7 @@ export const useHomeStore = defineStore("home", {
{ stage2Opacity: 1 }, { stage2Opacity: 1 },
{ {
stage2Opacity: 0, stage2Opacity: 0,
duration: 0.16, duration: 0.12,
ease: "none", ease: "none",
}, },
0, 0,
@@ -153,10 +153,10 @@ export const useHomeStore = defineStore("home", {
{ {
buttonOffsetY: -200, buttonOffsetY: -200,
stage1Opacity: 0, stage1Opacity: 0,
duration: 0.4, duration: 0.3,
ease: "none", 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, { .to(this.outro, {
backgroundOpacity: 1, backgroundOpacity: 1,
duration: 0.5, duration: 0.5,
delay: 0.5, delay: 0.2,
ease: "none", ease: "none",
}) })
.call(() => { .call(() => {

22
app/stores/settings.ts
View File

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