bg gradient hide

src/lib/animations/OpenSource.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { toScale, type Scale } from '$lib/utils/toScale';
 
-	import { browser } from '$app/environment';
-	import { animation, createScrollHandler, scroll, type Animation } from '.';
 	import { spring, type AnimationListOptions, type SpringOptions } from 'motion';
+	import { animation, createScrollHandler, scroll, type Animation } from '.';
 
 	const springOptions: SpringOptions = { stiffness: 58.78, mass: 1, damping: 17.14 };
 	const animationOptions: AnimationListOptions = {
@@ -82,11 +81,8 @@
 				whenAfter() {
 					const { main, reversed } = isMobile() ? mobile : desktop;
 
-					const { stop } = main.play();
-					return () => {
-						stop();
-						reversed.play();
-					};
+					main.play();
+					return reversed.play;
 				}
 			};
 		})
@@ -97,8 +93,6 @@
 	};
 </script>
 
-<svelte:window on:resize={scrollHandler.reset} />
-
 <div
 	id="open-source"
 	use:scroll
@@ -106,6 +100,13 @@
 		const { scrollPercentage } = detail;
 		scrollHandler(scrollPercentage);
 	}}
+	on:aw-resize={({ detail }) => {
+		scrollHandler.reset();
+		const { scrollPercentage } = detail;
+		console.log('resize', scrollPercentage);
+
+		scrollHandler(scrollPercentage);
+	}}
 >
 	<div class="sticky-wrapper">
 		<h3 class="aw-display aw-u-color-text-primary">Powered by Open Source</h3>
@@ -191,6 +192,17 @@
 
 		text-align: center;
 
+		&::after {
+			background: linear-gradient(
+				to top,
+				hsl(var(--aw-color-background)) 0%,
+				hsl(var(--aw-color-background) / 0) 10%
+			);
+			content: '';
+			position: absolute;
+			inset: 0;
+		}
+
 		p {
 			max-width: 48.875rem;
 		}