From bfe37715712d4c6752e5e8f84712b6b4713ca501 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Mon, 19 May 2025 02:20:37 +0100
Subject: [PATCH] style: improve animation effects for gsap, view transitions
 and highlight-hover

---
 src/components/Widgets/GsapAnimation.astro | 14 +++++++-------
 src/components/Widgets/TOC.astro           |  2 +-
 src/styles/global.css                      |  2 +-
 src/styles/transition.css                  |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Widgets/GsapAnimation.astro b/src/components/Widgets/GsapAnimation.astro
index 7386652..1be846f 100644
--- a/src/components/Widgets/GsapAnimation.astro
+++ b/src/components/Widgets/GsapAnimation.astro
@@ -17,7 +17,7 @@ function setupPostPageAnimation() {
   gsap.from(allElements.slice(0, 15), {
     opacity: 0,
     y: '2rem',
-    duration: 0.4,
+    duration: 0.3,
     delay: 0.1,
     ease: 'power2.out',
     stagger: 0.05,
@@ -27,7 +27,7 @@ function setupPostPageAnimation() {
     gsap.from(allElements.slice(15), {
       opacity: 0,
       y: '2rem',
-      duration: 0.4,
+      duration: 0.3,
       delay: 0.1 + 0.05 * 15,
       ease: 'power2.out',
     })
@@ -40,7 +40,7 @@ function setupPostPageAnimation() {
       gsap.from(dateElement, {
         opacity: 0,
         y: '1rem',
-        duration: 0.4,
+        duration: 0.3,
         delay: 0.1,
         ease: 'power2.out',
       })
@@ -51,7 +51,7 @@ function setupPostPageAnimation() {
       gsap.from(tocIcon, {
         opacity: 0,
         y: '0.5rem',
-        duration: 0.4,
+        duration: 0.3,
         delay: 0.125,
         ease: 'power2.out',
       })
@@ -62,7 +62,7 @@ function setupPostPageAnimation() {
       gsap.from(tocListChildren, {
         opacity: 0,
         y: '1rem',
-        duration: 0.4,
+        duration: 0.3,
         delay: 0.15,
         ease: 'power2.out',
         stagger: 0.025,
@@ -74,7 +74,7 @@ function setupPostPageAnimation() {
       gsap.from(backButton, {
         opacity: 0,
         x: '0.5rem',
-        duration: 0.4,
+        duration: 0.3,
         delay: 0.15,
         ease: 'power2.out',
       })
@@ -86,7 +86,7 @@ function setupPostPageAnimation() {
     gsap.from(tocContainer, {
       opacity: 0,
       y: '2rem',
-      duration: 0.4,
+      duration: 0.3,
       delay: 0.1,
       ease: 'power2.out',
     })
diff --git a/src/components/Widgets/TOC.astro b/src/components/Widgets/TOC.astro
index 6668cc5..79f1e29 100644
--- a/src/components/Widgets/TOC.astro
+++ b/src/components/Widgets/TOC.astro
@@ -104,7 +104,7 @@ const filteredHeadings = headings.filter(heading =>
 
 /* Initial collapsed state with zero height grid row */
 .accordion-wrapper {
-  --at-apply: 'grid rows-[0fr] transition-all duration-360 ease-in-out';
+  --at-apply: 'grid rows-[0fr] transition-all duration-350 ease-in-out';
 }
 .accordion-content {
   --at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-26rem)] pl-1)';
diff --git a/src/styles/global.css b/src/styles/global.css
index 9f36cf0..a37c55d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -61,7 +61,7 @@ h4:hover .heading-anchor-link svg:hover {
   --at-apply: 'origin-bottom-left scale-x-100';
 }
 .highlight-hover::after {
-  --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-300';
+  --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-225';
 }
 
 /* Fix Highlight Position Issue on iOS */
diff --git a/src/styles/transition.css b/src/styles/transition.css
index e45510d..17e0078 100644
--- a/src/styles/transition.css
+++ b/src/styles/transition.css
@@ -1,6 +1,6 @@
 /* View Transition */
 ::view-transition-new(animation-theme-toggle) {
-  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: reveal 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
   clip-path: inset(0 0 0 0);
   z-index: 99;
 }