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}

src/style/pages/_about.scss

@@ -3,18 +3,16 @@
     ** Purpose
     */
     &__purpose {
-        position: relative;
         text-align: center;
 
         .container-wide {
+            position: relative;
             display: flex;
             align-items: center;
-            overflow: hidden;
             justify-content: center;
             min-height: calc(100vh - var(--sides));
             color: #fff;
             padding: 0 8%;
-            border-radius: 16px;
 
             @include bp (sm) {
                 padding: 0 18%;
@@ -23,11 +21,13 @@
 
         // Text
         .text {
+            opacity: 0.2;
             max-width: 1024px;
+            transition: opacity 3s var(--ease-quart);
 
             :global(strong) {
-                color: $color-secondary-light;
                 font-weight: inherit;
+                transition: color 3s var(--ease-quart);
             }
         }
 
@@ -41,14 +41,31 @@
             height: 100%;
             opacity: 0;
             background-color: $color-primary-tertiary20;
-            transition: opacity 1.2s var(--ease-quart);
+            border-radius: 8px;
+            transform: scale(1.15) translateZ(0);
+            transition-property: opacity, transform;
+            transition-duration: 3s;
+            transition-timing-function: var(--ease-quart);
+            transition-delay: 0.25s;
+
+            @include bp (sm) {
+                border-radius: 16px;
+            }
         }
 
 
         // Visible state
         &:global(.is-visible) {
+            .text {
+                opacity: 1;
+
+                :global(strong) {
+                    color: $color-secondary-light;
+                }
+            }
             .background {
                 opacity: 1;
+                transform: scale(1) translateZ(0);
             }
         }
     }