From 54d20530e5ecb94bf37b781bcd093d4a10bc9252 Mon Sep 17 00:00:00 2001
From: saiminh <saiminh@gmail.com>
Date: Wed, 18 Oct 2023 17:43:40 +0200
Subject: [PATCH] smooth the work loading

---
 src/routes/work/[slug]/+page.svelte | 33 ++++++++++++++++++++++++++---
 src/routes/work/work.scss           |  2 +-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte
index f7a626b..6b8c510 100644
--- a/src/routes/work/[slug]/+page.svelte
+++ b/src/routes/work/[slug]/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount } from 'svelte';
   import { gsap } from 'gsap';
   import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
-  import ScrollToPlugin from 'gsap/dist/ScrollToPlugin';
-  import { CldImage, CldVideoPlayer } from 'svelte-cloudinary';
+  import { CldImage } from 'svelte-cloudinary';
   export let data;
 
   gsap.registerPlugin(ScrollTrigger);
@@ -15,6 +14,29 @@
     if (document.querySelector('.workclone')) {
       document.querySelector('.workclone')?.remove();
     }
+
+    setTimeout( () => {
+      if (document.querySelector('.gallery img')) {
+        document.querySelectorAll('.gallery img').forEach(image => {
+          let img = image as HTMLImageElement;
+          if (!img.complete) {
+            img.classList.add('imageIsLoading');
+            img.onload = () => {
+              gsap.fromTo(img, {
+                autoAlpha: 0,
+                scale: 1.2,
+              }, {
+                autoAlpha: 1,
+                scale: 1,
+                duration: 1,
+                ease: 'power4.out',
+              })
+            }
+          }
+        })
+      }
+    }, 10)
+
     gsap.to('.logo-wrapper', {
       opacity: 0,
       zIndex: -1,
@@ -322,4 +344,9 @@
       object-fit: cover;
     }
   }
+  :global(.imageIsLoading) {
+    visibility: hidden;
+    opacity: 0;
+  }
+
 </style>
\ No newline at end of file
diff --git a/src/routes/work/work.scss b/src/routes/work/work.scss
index 9405293..4c8f019 100644
--- a/src/routes/work/work.scss
+++ b/src/routes/work/work.scss
@@ -59,7 +59,7 @@
   width: 100vw;
   height: 100vh;
   opacity: 0;
-  transform: translateZ(700px);
+  transform: translateZ(700px) scaleY(0);
 }
 .work-logo {
   width: 100%;