✨ Rework About page Process section

src/components/molecules/ProcessStep.svelte

@@ -3,53 +3,60 @@
 </style>
 
 <script lang="ts">
+    import { scaleFade } from '$animations/transitions'
+
     // Components
     import Image from '$components/atoms/Image.svelte'
     import { getAssetUrlKey } from '$utils/api'
 
     export let index: number
-    export let title: string
     export let text: string
     export let image: any = undefined
     export let video: any = undefined
+    export let visible: boolean = false
+
+    let videoEl: HTMLVideoElement
 
     const imageRatio = image ? image.width / image.height : undefined
+
+    // Toggle video playback if step is visible
+    $: if (videoEl) {
+        visible ? videoEl.play() : videoEl.pause()
+    }
 </script>
 
-<div class="step" style:--index={index}>
-    <div class="step__card grid">
-        {#if image || video}
-        <div class="media">
-            {#if image}
-                <Image
-                    class="image shadow-box-dark"
-                    id={image.id}
-                    sizeKey="product"
-                    sizes={{
-                        small: { width: 400 },
-                        medium: { width: 600 },
-                        large: { width: 800 },
-                    }}
-                    ratio={imageRatio}
-                    alt={image.title}
-                />
-            {:else if video}
-                <video muted loop playsinline allow="autoplay">
-                    <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
-                    <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
-                    <track kind="captions" />
-                </video>
-            {/if}
-        </div>
+{#if visible}
+<div class="step grid" style:--index={index}
+    in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
+    out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
+>
+    {#if image || video}
+    <div class="media">
+        {#if image}
+            <Image
+                class="image shadow-box-dark"
+                id={image.id}
+                sizeKey="product"
+                sizes={{
+                    small: { width: 400 },
+                    medium: { width: 600 },
+                    large: { width: 800 },
+                }}
+                ratio={imageRatio}
+                alt={image.title}
+            />
+        {:else if video}
+            <video muted loop playsinline autoplay allow="autoplay" bind:this={videoEl}>
+                <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
+                <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
+                <track kind="captions" />
+            </video>
         {/if}
-
-        <div class="content">
-            <h3 class="title-medium">{title}</h3>
-            <div class="text text-small">
-                {@html text}
-            </div>
-        </div>
-
-        <div class="overlay" />
     </div>
-</div>
+    {/if}
+
+    <div class="text text-small">
+        {@html text}
+    </div>
+</div>
+{/if}