Reveal photos on scroll on Location page

src/routes/[country]/[location]/index.svelte

@@ -27,7 +27,10 @@
     const hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
 
     let introEl: HTMLElement
+    let photosListEl: HTMLElement
     let scrollY: number
+    let observerPhotos: IntersectionObserver
+    let mutationPhotos: MutationObserver
     let currentPage = 1
     let ended: boolean
     let currentPhotosAmount: number
@@ -138,6 +141,45 @@
             translateY: ['10%', 0],
             opacity: [0, 1],
         }, 900 + ($navigating ? DURATION.PAGE_IN : 0))
+
+
+        // Photos IntersectionObserver
+        observerPhotos = new IntersectionObserver(entries => {
+            entries.forEach(({ isIntersecting, target }: IntersectionObserverEntry) => {
+                target.classList.toggle('is-visible', isIntersecting)
+
+                // Run effect once
+                isIntersecting && observerPhotos.unobserve(target)
+            })
+        }, {
+            threshold: 0.3,
+            rootMargin: '0px 0px 0px'
+        })
+
+        // Photos MutationObserver
+        mutationPhotos = new MutationObserver((mutationsList, observer) => {
+            // When adding new childs
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    // Observe new items
+                    mutation.addedNodes.forEach((item: HTMLElement) => observerPhotos.observe(item))
+                }
+            }
+        })
+        mutationPhotos.observe(photosListEl, {
+            childList: true,
+        })
+
+        // Observe existing elements
+        const existingPhotos = photosListEl.querySelectorAll('.house')
+        existingPhotos.forEach(el => observerPhotos.observe(el))
+
+
+        // Destroy
+        return () => {
+            observerPhotos && observerPhotos.disconnect()
+            mutationPhotos && mutationPhotos.disconnect()
+        }
     })
 </script>
 
@@ -220,7 +262,7 @@
     </section>
 
     {#if photos.length}
-        <section class="location-page__houses grid">
+        <section class="location-page__houses grid" bind:this={photosListEl}>
             {#each photos as { title, image: { id, title: alt }, slug, city, date_taken }, index}
                 <div class="house grid">
                     <div class="house__info">

src/routes/photos.svelte

@@ -244,16 +244,16 @@
                 isIntersecting && observerPhotos.unobserve(target)
             })
         }, {
-            threshold: 0,
+            threshold: 0.3,
             rootMargin: '0px 0px 0px'
         })
 
         // Photos MutationObserver
         mutationPhotos = new MutationObserver((mutationsList, observer) => {
-            // Use traditional 'for loops' for IE 11
             for (const mutation of mutationsList) {
+                // When adding new childs
                 if (mutation.type === 'childList') {
-                    console.log('A child node has been added or removed.')
+                    // Observe new items
                     mutation.addedNodes.forEach((item: HTMLElement) => observerPhotos.observe(item))
                 }
             }