From bec2c0879be1009794d4d403352b1f38044444c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 19:48:53 +0100
Subject: [PATCH] Fix Photos grid's filter bar coming down when scrolling back
 up

Merci Grafikart !
The idea is to use a transitioning class that we apply after a little delay so we don't have the jumpy transition when scrolling down.
---
 src/routes/photos.svelte     | 57 +++++++++++++++++++++---------------
 src/style/pages/_photos.scss |  6 +++-
 2 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 47fda4b..e51ce66 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -29,17 +29,19 @@
 
     const { countries }: any = getContext('global')
 
-    let introEl: HTMLElement
-    let filtersEl: HTMLElement
     let photosContentEl: HTMLElement
     let photosGridEl: HTMLElement
     let observerPhotos: IntersectionObserver
     let mutationPhotos: MutationObserver
     let scrollY: number
     let innerWidth: number, innerHeight: number
-    let scrolledPastIntro: boolean
+    // Filters related
     let scrollDirection = 0
     let lastScrollTop = 0
+    let scrolledPastIntro: boolean
+    let filtersOver: boolean
+    let filtersVisible: boolean
+    let filtersTransitioning: boolean
 
 
     /**
@@ -207,32 +209,33 @@
 
 
     /**
-     * Detect scroll passed intro
+     * Scroll detection when entering content
      */
-    $: if (browser && scrollY) {
+    $: if (scrollY) {
         // Detect scroll direction
         throttle(() => {
             scrollDirection = scrollY > lastScrollTop ? 1 : -1
             lastScrollTop = scrollY
-        }, 50)
 
-        // Scrolled past grid of photos
-        if (scrollY > photosContentEl.offsetTop) {
-            if (!scrolledPastIntro) {
-                introEl.classList.add('is-passed')
-                filtersEl.classList.add('is-over')
-            }
-            scrolledPastIntro = true
-        } else {
-            if (scrolledPastIntro) {
-                introEl.classList.remove('is-passed')
-                filtersEl.classList.remove('is-over')
-            }
-            scrolledPastIntro = false
-        }
+            // Show filters bar when scrolling back up
+            filtersVisible = scrollDirection < 0
 
-        // Show/hide filters bar when scrolling back up
-        filtersEl.classList.toggle('is-visible', scrollDirection < 0)
+            // Scrolled past grid of photos
+            if (scrollY > photosContentEl.offsetTop) {
+                if (!scrolledPastIntro) {
+                    filtersOver = true
+                    // Hacky: Set filters as transitioning after a little delay to avoid an transition jump
+                    setTimeout(() => filtersTransitioning = true, 30)
+                }
+                scrolledPastIntro = true
+            } else {
+                if (scrolledPastIntro) {
+                    filtersOver = false
+                    filtersTransitioning = false
+                }
+                scrolledPastIntro = false
+            }
+        }, 200)()
     }
 
 
@@ -294,14 +297,20 @@
     in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
     out:fade={{ duration: DURATION.PAGE_OUT }}
 >
-    <section class="photos__intro" bind:this={introEl}>
+    <section class="photos__intro"
+        class:is-passed={scrolledPastIntro}
+    >
         <ScrollingTitle tag="h1" text="Houses">
             <SplitText text="Houses" mode="chars" />
         </ScrollingTitle>
 
         <DiscoverText />
 
-        <div class="filter" bind:this={filtersEl}>
+        <div class="filter"
+            class:is-over={filtersOver}
+            class:is-transitioning={filtersTransitioning}
+            class:is-visible={filtersVisible}
+        >
             <span class="text-label filter__label">Filter photos</span>
 
             <div class="filter__bar">
diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss
index 664414f..c1b8d75 100644
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -210,7 +210,6 @@
             --top: 24px;
             transform: translate3d(0, calc(-100% - var(--top)), 0);
             pointer-events: none;
-            transition: transform 1.0s var(--ease-quart);
 
             .filter__bar {
                 pointer-events: auto;
@@ -231,6 +230,11 @@
             transform: translate3d(0,0,0);
             pointer-events: auto;
         }
+
+        // Apply transition
+        &.is-transitioning {
+            transition: transform 1.0s var(--ease-quart);
+        }
     }
 
     // Content Block