From de7172f68678480b31a6c7287258625cffb9da31 Mon Sep 17 00:00:00 2001
From: saiminh <saiminh@gmail.com>
Date: Wed, 23 Aug 2023 18:24:11 +0200
Subject: [PATCH] add and remove image for smoothness

---
 src/routes/+layout.svelte           | 17 +++++++----------
 src/routes/work/+page.svelte        | 12 ++++++++++--
 src/routes/work/[slug]/+page.svelte |  7 +++----
 src/routes/work/workUtils.ts        | 23 ++++++++++++++++++++++-
 4 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bd1f054..2b232e6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,13 +7,10 @@
 
 <Header />
 
-{#key data.pathname}
-  
-  <div 
-    class="content" 
-    
-  > 
-    <slot />
-  </div>
- 
-{/key}
+  {#key data.pathname}
+    <div 
+      class="content"
+    >
+      <slot />
+    </div>
+  {/key}
diff --git a/src/routes/work/+page.svelte b/src/routes/work/+page.svelte
index 04daf58..4d92a37 100644
--- a/src/routes/work/+page.svelte
+++ b/src/routes/work/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import WorkCanvas from '$lib/components/WorkCanvas.svelte';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import { workClickHandler, initWorkPage } from './workUtils.js';
   import { workbulge } from '$lib/utils/stores.js';
   import { CldImage } from 'svelte-cloudinary';
+  import { browser } from '$app/environment';
   import { fade } from 'svelte/transition';
   export let data;
 
@@ -28,13 +29,20 @@
   <div class="works">
     
     {#each data.posts as work, i}
-      <a href="{work.path}" class="work" on:click={ (e) => workClickHandler(e) }>
+      <a 
+        data-sveltekit-preload-data
+        href="{work.path}" 
+        class="work" 
+        on:click={ (e) => workClickHandler(e) } 
+      >
           <CldImage 
             src={work.meta.header_bg_image}
             sizes="(min-width: 768px) 20vw, 50vw"
             alt={work.meta.title}
             width="2100"
             height="1400"
+            objectFit="fill"
+            placeholder="blur"
             loading= {i < 10 ? "eager" : "lazy"}
           />
         <h2>{work.meta.title}</h2>
diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte
index 6d5f50a..51ef91c 100644
--- a/src/routes/work/[slug]/+page.svelte
+++ b/src/routes/work/[slug]/+page.svelte
@@ -122,6 +122,7 @@
       sizes="100vw"
       width={2100}
       height={1400}
+      placeholder="blur"
       loading="eager"
       objectFit="fill"
     />
@@ -143,8 +144,10 @@
 <style lang="scss">
   article {
     width: 100vw;
+    min-height: 100svh;
     overflow: hidden;
     padding-bottom: 60px;
+    background-color: var(--color-bg);
   }
   .subnav {
     position: fixed;
@@ -162,10 +165,6 @@
     height: auto;
     aspect-ratio: var(--aspect-ratio-heroes);
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-    
-    @media screen and (min-width: 768px) {
-      position: fixed;
-    }
   }
   :global(.heromask img) {
     z-index: 0;
diff --git a/src/routes/work/workUtils.ts b/src/routes/work/workUtils.ts
index 4f098ab..7136f12 100644
--- a/src/routes/work/workUtils.ts
+++ b/src/routes/work/workUtils.ts
@@ -59,7 +59,12 @@ export function workClickHandler(e:Event){
   const clone = targetImg.cloneNode(true) as HTMLElement;
   targetImg.parentElement?.insertBefore(clone, targetImg);
   targetImg.style.position = 'fixed';
-
+  const coverclone = targetImg.cloneNode(true) as HTMLElement;
+  coverclone.style.zIndex = '-1';
+  coverclone.style.visibility = 'visible';
+  coverclone.style.opacity = '0';
+  
+  document.body.appendChild(coverclone);
 
   gsap.to('.work:not(.active) img', {
     duration: .3,
@@ -70,6 +75,16 @@ export function workClickHandler(e:Event){
   gsap.set(targetImg, {
     zIndex: 100,
   })
+  gsap.to(coverclone, {
+    duration: .3,
+    top: 0,
+    left: 0,
+    opacity: 1,
+    width: window.innerWidth,
+    height: window.innerWidth / targetImgAspectRatio,
+    ease: 'circ.inOut',
+    delay: 0.3
+  })
   gsap.to(targetImg, {
     duration: .3,
     top: 0,
@@ -78,6 +93,12 @@ export function workClickHandler(e:Event){
     height: window.innerWidth / targetImgAspectRatio,
     ease: 'circ.inOut',
     delay: 0.3,
+    onComplete: () => {
+      setTimeout(() => {
+        
+        coverclone.remove();
+      }, 300);
+    }
   })
   gsap.to(bulge, {
     duration: .3,