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

@@ -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)
+
+            // Show filters bar when scrolling back up
+            filtersVisible = scrollDirection < 0
 
             // Scrolled past grid of photos
             if (scrollY > photosContentEl.offsetTop) {
                 if (!scrolledPastIntro) {
-                introEl.classList.add('is-passed')
+                    filtersOver = true
-                filtersEl.classList.add('is-over')
+                    // Hacky: Set filters as transitioning after a little delay to avoid an transition jump
+                    setTimeout(() => filtersTransitioning = true, 30)
                 }
                 scrolledPastIntro = true
             } else {
                 if (scrolledPastIntro) {
-                introEl.classList.remove('is-passed')
+                    filtersOver = false
-                filtersEl.classList.remove('is-over')
+                    filtersTransitioning = false
                 }
                 scrolledPastIntro = false
             }
-
+        }, 200)()
-        // Show/hide filters bar when scrolling back up
-        filtersEl.classList.toggle('is-visible', scrollDirection < 0)
     }
 
 
@@ -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">

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