add scale to scroll animation and add to project cards

Trombach · Sep 19, 2024 · ec5d51d · ec5d51d
1 parent 4414904
commit ec5d51d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/ProjectCard/ProjectCard.astro b/src/components/ProjectCard/ProjectCard.astro
@@ -14,6 +14,7 @@ const { href, title, description, cover, meta } = Astro.props;
 <li
   class:list={[
     "group max-w-[600px] overflow-clip rounded-xl border bg-card text-card-foreground",
+    "timeline-slide-in-bottom [animation-range:entry_10%_contain_25%]"
   ]}
   transition:name={`border-${dash(title)}`}
 >

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -46,12 +46,14 @@ module.exports = {
     extend: {
       keyframes: {
         "slide-in-bottom": {
-          "0%": {
+          from: {
             transform: "translateY(100px)",
+            scale: "0.8",
             opacity: 0,
           },
-          "100%": {
+          to: {
             transform: "translateY(0)",
+            scale: "1",
             opacity: 1,
           },
         },