Use shared instance of IntersectionObserver

Author: zerodevx

src/lib/FxReveal.svelte

@@ -1,5 +1,6 @@
 <script>
 import Img from './SvelteImg.svelte'
+import observe from './_observe.js'
 import { onMount } from 'svelte'
 
 export let src = []
@@ -11,21 +12,6 @@ let mounted = false
 let loaded = false
 let inview = false
 
-function observe(node) {
-  const observer = new IntersectionObserver((entries) => {
-    if (entries[0].isIntersecting) {
-      inview = true
-      observer.disconnect()
-    }
-  })
-  observer.observe(node)
-  return {
-    destroy() {
-      observer.disconnect()
-    }
-  }
-}
-
 $: if (src.length) {
   const { base64 } = src.find((i) => i.base64)
   background = base64 ? `url('${base64}') no-repeat center/cover` : undefined
@@ -39,7 +25,13 @@ onMount(() => {
 </script>
 
 {#if src.length}
-  <div class="wrap" class:mounted class:reveal={loaded && inview} use:observe>
+  <div
+    class="wrap"
+    class:mounted
+    class:reveal={loaded && inview}
+    use:observe
+    on:enter={() => (inview = true)}
+  >
     <Img src={sources} bind:ref on:load={() => (loaded = true)} on:click {...$$restProps} />
     <div class="lqip" style:background />
   </div>
@@ -55,10 +47,11 @@ onMount(() => {
 }
 .mounted :global(img) {
   opacity: 0;
-  transform: scale(1.02);
+  transform: scale(var(--reveal-scale, 1.03));
 }
 .reveal :global(img) {
-  transition: opacity 1s linear, transform 0.6s ease-out;
+  transition: opacity var(--reveal-opacity-duration, 1s) linear,
+    transform var(--reveal-transform-duration, 0.6s) ease-out;
   opacity: 1;
   transform: scale(1);
 }

src/lib/_observe.js

@@ -0,0 +1,18 @@
+let observer
+
+export default function (node) {
+  observer =
+    observer ||
+    new IntersectionObserver((entries) => {
+      for (const detail of entries) {
+        const { isIntersecting, target } = detail
+        target.dispatchEvent(new CustomEvent(isIntersecting ? 'enter' : 'leave', { detail }))
+      }
+    })
+  observer.observe(node)
+  return {
+    destroy() {
+      observer.unobserve(node)
+    }
+  }
+}