From 84492aa344014838d9692024986046173b3417b3 Mon Sep 17 00:00:00 2001
From: Sped0n <realsped0n@outlook.com>
Date: Tue, 6 Feb 2024 22:29:17 +0800
Subject: [PATCH] feat: add loading transition animation and improve
 performance

---
 assets/ts/desktop/stage.ts  | 51 +++++++++++++++++++++++++++++--------
 assets/ts/mobile/gallery.ts | 11 +++++---
 2 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/assets/ts/desktop/stage.ts b/assets/ts/desktop/stage.ts
index 39c2e28..ee60658 100644
--- a/assets/ts/desktop/stage.ts
+++ b/assets/ts/desktop/stage.ts
@@ -85,32 +85,42 @@ function setPositions(): void {
 
   const elsTrail = getImagesWithIndexArray(trailElsIndex)
 
+  // cached state
+  const _isOpen = isOpen.get()
+  const _cordHist = cordHist.get()
+  const _state = state.get()
+
   _gsap.set(elsTrail, {
-    x: (i: number) => cordHist.get()[i].x - window.innerWidth / 2,
-    y: (i: number) => cordHist.get()[i].y - window.innerHeight / 2,
+    x: (i: number) => _cordHist[i].x - window.innerWidth / 2,
+    y: (i: number) => _cordHist[i].y - window.innerHeight / 2,
     opacity: (i: number) =>
-      i + 1 + state.get().trailLength <= cordHist.get().length ? 0 : 1,
+      Math.max(
+        (i + 1 + _state.trailLength <= _cordHist.length ? 0 : 1) - (_isOpen ? 1 : 0),
+        0
+      ),
     zIndex: (i: number) => i,
     scale: 0.6
   })
 
-  if (isOpen.get()) {
+  if (_isOpen) {
     const elc = getImagesWithIndexArray([getCurrentElIndex()])[0]
-    elc.classList.add('hide') // hide image to prevent flash
     const indexArrayToHires: number[] = []
+    const indexArrayToCleanup: number[] = []
     switch (navigateVector.get()) {
       case 'prev':
         indexArrayToHires.push(getPrevElIndex())
+        indexArrayToCleanup.push(getNextElIndex())
         break
       case 'next':
         indexArrayToHires.push(getNextElIndex())
+        indexArrayToCleanup.push(getPrevElIndex())
         break
       default:
         break
     }
     hires(getImagesWithIndexArray(indexArrayToHires)) // preload
     _gsap.set(getImagesWithIndexArray(indexArrayToCleanup), { opacity: 0 })
-    _gsap.set(imgs, { opacity: 0 })
+    _gsap.set(elc, { x: 0, y: 0, scale: 1 }) // set current to center
     setLoaderForHiresImage(elc) // set loader, if loaded set current opacity to 1
   } else {
     lores(elsTrail)
@@ -337,21 +347,40 @@ function setLoaderForHiresImage(e: HTMLImageElement): void {
     e.addEventListener(
       'load',
       () => {
-        isLoading.set(false)
-        e.classList.remove('hide')
+        _gsap
+          .to(e, { opacity: 1, ease: _Power3.easeIn, duration: 0.5 })
+          .then(() => {
+            isLoading.set(false)
+          })
+          .catch((e) => {
+            console.log(e)
+          })
       },
       { once: true, passive: true }
     )
     e.addEventListener(
       'error',
       () => {
-        isLoading.set(false)
+        _gsap
+          .set(e, { opacity: 1 })
+          .then(() => {
+            isLoading.set(false)
+          })
+          .catch((e) => {
+            console.log(e)
+          })
       },
       { once: true, passive: true }
     )
   } else {
-    e.classList.remove('hide')
-    isLoading.set(false)
+    _gsap
+      .set(e, { opacity: 1 })
+      .then(() => {
+        isLoading.set(false)
+      })
+      .catch((e) => {
+        console.log(e)
+      })
   }
 }
 
diff --git a/assets/ts/mobile/gallery.ts b/assets/ts/mobile/gallery.ts
index 290da84..a3d2046 100644
--- a/assets/ts/mobile/gallery.ts
+++ b/assets/ts/mobile/gallery.ts
@@ -237,13 +237,18 @@ function createGallery(ijs: ImageJSON[]): void {
     e.height = ij.hiImgH
     e.width = ij.hiImgW
     e.alt = ij.alt
-    e.classList.add('hide')
+    e.style.opacity = '0'
     // load event
     e.addEventListener(
       'load',
       () => {
-        e.classList.remove('hide')
-        l.classList.add('hide')
+        if (state.get().index !== ij.index) {
+          _gsap.set(e, { opacity: 1 })
+          _gsap.set(l, { opacity: 0 })
+        } else {
+          _gsap.to(e, { opacity: 1, duration: 0.5, ease: _Power3.easeIn })
+          _gsap.to(l, { opacity: 0, duration: 0.5, ease: _Power3.easeIn })
+        }
       },
       { once: true, passive: true }
     )