Add scroll-driven animation experiment

components/experiments/scroll/WlScrollDrivenAnimation.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="wl-sda-root relative">
+    <div class="wl-sda-progress absolute h-1 w-full bg-amber-500" />
+    <div class="wl-sda flex gap-3 overflow-x-scroll py-3">
+      <div
+        v-for="i in 10"
+        :key="i"
+        class="h-32 w-32 shrink-0 rounded border bg-slate-200 dark:bg-slate-800"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@keyframes sda-progress {
+  from {
+    background-color: theme('colors.red.500');
+    width: 0;
+  }
+
+  to {
+    background-color: theme('colors.amber.500');
+    width: 100%;
+  }
+}
+
+.wl-sda-root {
+  timeline-scope: --wl-sda;
+}
+
+.wl-sda {
+  scroll-timeline: --wl-sda inline;
+}
+
+.wl-sda-progress {
+  animation: sda-progress linear;
+  animation-timeline: --wl-sda;
+}
+</style>

pages/experiments/scroll/index.vue

@@ -17,6 +17,15 @@
           Used to show multiple cards in an animated stack list as the box scrolls.
         </template>
       </ExperimentCanvas>
+      <p>
+        The
+        <a href="https://developer.chrome.com/articles/scroll-driven-animations/" class="underline" target="_blank">
+          <span>scroll-driven animation</span>
+        </a>:
+      </p>
+      <ExperimentCanvas>
+        <WlScrollDrivenAnimation />
+      </ExperimentCanvas>
     </Container>
   </NuxtLayout>
 </template>
@@ -25,4 +34,5 @@
 import Container from '~/components/shared/layout/Container.vue'
 import ExperimentCanvas from '~/components/shared/experiments/ExperimentCanvas.vue'
 import WlScrollStackAnimatedContainer from '~/components/experiments/scroll/WlScrollStackAnimatedContainer.vue'
+import WlScrollDrivenAnimation from '~/components/experiments/scroll/WlScrollDrivenAnimation.vue'
 </script>