diff --git a/app/components/NDS2D.vue b/app/components/NDS2D.vue index e00abef..25d9250 100644 --- a/app/components/NDS2D.vue +++ b/app/components/NDS2D.vue @@ -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})` }; }); diff --git a/app/stores/contact.ts b/app/stores/contact.ts index b1c782a..21ba67c 100644 --- a/app/stores/contact.ts +++ b/app/stores/contact.ts @@ -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); }, }); diff --git a/app/stores/gallery.ts b/app/stores/gallery.ts index 2781d93..08affa6 100644 --- a/app/stores/gallery.ts +++ b/app/stores/gallery.ts @@ -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, }, diff --git a/app/stores/home.ts b/app/stores/home.ts index 816588c..0753e56 100644 --- a/app/stores/home.ts +++ b/app/stores/home.ts @@ -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, ); }, }, diff --git a/app/stores/intro.ts b/app/stores/intro.ts index f3f491d..9a804be 100644 --- a/app/stores/intro.ts +++ b/app/stores/intro.ts @@ -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(() => { diff --git a/app/stores/settings.ts b/app/stores/settings.ts index ec86a3c..7f5f07a 100644 --- a/app/stores/settings.ts +++ b/app/stores/settings.ts @@ -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();