Create reveal animation for About page Purpose section

Using Motion One inView for detecting and toggling class 🤌

src/routes/about.svelte

@@ -5,7 +5,7 @@
 <script lang="ts">
     import { onMount, afterUpdate } from 'svelte'
     import { map } from '$utils/functions'
-    import { scroll, animate, type ScrollOptions } from 'motion'
+    import { scroll, animate, inView, type ScrollOptions } from 'motion'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -22,10 +22,10 @@
     // console.log(data)
 
     let scrollY: number, innerWidth: number, innerHeight: number
+    let purposeEl: HTMLElement
     let stepsEl: HTMLElement
     let photosGridEl: HTMLElement
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
-    let sectionsObserver: IntersectionObserver
 
     $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
     $: fadedPhotosIndexes = innerWidth > 768
@@ -33,24 +33,17 @@
         : [0]
 
     onMount(() => {
-        // Sections observer
-        sectionsObserver = new IntersectionObserver(([{ isIntersecting, target }]: [IntersectionObserverEntry] & [{ target: HTMLElement }]) => {
+        /**
+         * Purpose reveal
+         */
+        inView(purposeEl, ({ target, isIntersecting }) => {
             target.classList.toggle('is-visible', isIntersecting)
-
-            // Run effect once
-            if (isIntersecting && target.dataset.stay) {
-                sectionsObserver.unobserve(target)
-            }
-        }, {
-            threshold: 0.5,
-            rootMargin: '0% 0px 0%'
-        })
-
-        const sections = document.querySelectorAll('.about [data-part]')
-        sections.forEach(section => sectionsObserver.observe(section))
+        }, { amount: 0.75 })
 
 
-        // Steps scroll animation
+        /**
+         * Steps scroll animation
+         */
         const cards = stepsEl.querySelectorAll('.step')
         const cardsAmount = data.process_steps.length
 
@@ -73,12 +66,6 @@
                 opacity: [0, 0.2 + (0.05 * reverseIndex)]
             }), scrollOptions)
         })
-
-
-        // Destroy
-        return () => {
-            sectionsObserver && sectionsObserver.disconnect()
-        }
     })
 
 
@@ -102,7 +89,7 @@
         text={data.description}
     />
 
-    <section class="about__purpose" data-part data-stay="true">
+    <section class="about__purpose" bind:this={purposeEl}>
         <div class="container-wide">
             <div class="text title-xl" role="heading">
                 {@html data.purpose_text}