From bc2886f7e2722f16e9656ec93cec0e101860560f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 5 Jan 2024 19:13:51 +0800
Subject: [PATCH] Ancestor indicator animates smoother with spring

---
 src/index.css        | 12 ++++++++++++
 src/pages/status.css |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index da0c394d..1cd4d7b2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,6 +89,7 @@
   --media-outline-color: color-mix(in lch, var(--media-fg-color), transparent);
 
   --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
+  --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 @media (min-resolution: 2dppx) {
@@ -447,6 +448,17 @@ kbd {
   }
 }
 
+@keyframes slide-up-smooth {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes position-object {
   0% {
     object-position: 50% 50%;
diff --git a/src/pages/status.css b/src/pages/status.css
index 49bca448..67c38ba8 100644
--- a/src/pages/status.css
+++ b/src/pages/status.css
@@ -33,7 +33,7 @@
   }
 }
 .ancestors-indicator:not([hidden]) {
-  animation: slide-up 0.3s both ease-out 0.3s;
+  animation: slide-up-smooth 0.3s both var(--spring-timing-funtion) 0.3s;
 }
 .ancestors-indicator[hidden] {
   opacity: 0;