animate cards

2023-06-26 01:31:02 +02:00
parent b228f3cd8d
commit 0dfa43c4ed
3 changed files with 30 additions and 3 deletions
--- a/web/src/sections/Features.astro
+++ b/web/src/sections/Features.astro
@@ -34,6 +34,7 @@ const features: Array<Feature> = [
        <Heading>Core Features & Values</Heading>
    </div>
    <div
+        id="features-cards-container"
        class="flex flex-row flex-nowrap overflow-x-auto snap-x snap-mandatory gap-card overflow-y-clip p-main snap-center"
    >
        {
@@ -47,3 +48,27 @@ const features: Array<Feature> = [
        }
    </div>
 </div>
+
+<script>
+    import { animate, inView, stagger } from "motion";
+    import { ease } from "@unom/style";
+
+    const cardsContainer = document.getElementById("features-cards-container");
+
+    const cards = document.querySelectorAll("#features-cards-container .card");
+
+    if (cardsContainer) {
+        inView(cardsContainer, () => {
+            animate(
+                cards,
+                {
+                    scale: [0.8, 1],
+                    opacity: [0, 1],
+                },
+                { ...ease.quint(0.8).out, delay: stagger(0.1) }
+            );
+        });
+    }
+
+    console.log(cardsContainer);
+</script>