From fd04d98463e10d5502d5a8af9d79360a24c50308 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 24 Oct 2021 15:29:57 +0200
Subject: [PATCH] Change max sides margin depending on window width when
 scrolling

Running it on window scroll avoids a flash effect on and is more optimized as it is not ran every time scrollY changes
---
 src/routes/photos.svelte | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 06f568b..abb9fdd 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -7,8 +7,8 @@
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
-    import { map, lerp } from '$utils/functions'
     import { getAssetUrlKey } from '$utils/helpers'
+    import { map, lerp, throttle } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -50,14 +50,21 @@
     $: currentPhotosAmount = photos.length
     $: ended = currentPhotosAmount === totalPhotos
 
-    // Container margins
+
+    /**
+     * Container margins
+     */
     let scrollProgress: number
-    let sideMargins: number = 8
-    $: if (browser && window.innerWidth >= 768) {
-        const viewportScroll = innerHeight / innerWidth <= 0.6 ? innerHeight * 1.5 : innerHeight
-        scrollProgress = map(scrollY, 0, viewportScroll, 0, 1, true)
-        sideMargins = lerp(8, 30, scrollProgress)
-    }
+    let sideMargins: number = innerWidth < 1200 ? 16 : 8
+    $: viewportScroll = (innerHeight / innerWidth) <= 0.6 ? innerHeight * 1.5 : innerHeight
+
+    // Define sides margin on scroll
+    const setSidesMargin = throttle(() => {
+        if (window.innerWidth >= 992) {
+            scrollProgress = map(scrollY, 0, viewportScroll, 0, 1, true)
+            sideMargins = lerp(innerWidth < 1200 ? 16 : 8, 30, scrollProgress)
+        }
+    }, 50)
 
 
     /**
@@ -186,7 +193,10 @@
     image=""
 />
 
-<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
+<svelte:window
+    bind:scrollY bind:innerWidth bind:innerHeight
+    on:scroll={setSidesMargin}
+/>
 
 
 <main class="photos">