style: update animation duration and delay, fix transition issues on mobile

src/components/Widgets/GsapAnimation.astro

@@ -9,40 +9,38 @@ function setupPostPageAnimation() {
   const backButton = document.getElementById('back-button')
   const tocIcon = document.getElementById('toc-icon')
   const tocContainer = document.getElementById('toc-container')
-
   const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
   const isSmallScreen = window.matchMedia('(max-width: 1535px)').matches
 
-  // Post Content + Tags + Comments
-  // First 15 elements
-  gsap.from(allElements.slice(0, 15), {
-    opacity: 0,
-    y: '2rem',
-    duration: 0.3,
-    delay: 0.1,
-    ease: 'power2.out',
-    stagger: 0.05,
-  })
-  // Rest elements as the 16 element
-  if (allElements.length > 15) {
-    gsap.from(allElements.slice(15), {
-      opacity: 0,
-      y: '2rem',
-      duration: 0.3,
-      delay: 0.1 + 0.05 * 15,
-      ease: 'power2.out',
-    })
-  }
-
-  // Desktop Animations
   if (isLargeScreen) {
+    // Post Content + Tags + Comments
+    // First 15 elements
+    gsap.from(allElements.slice(0, 15), {
+      opacity: 0,
+      y: '3rem',
+      duration: 0.5,
+      delay: 0.2,
+      ease: 'power2.out',
+      stagger: 0.05,
+    })
+    // Rest elements as the 16th element
+    if (allElements.length > 15) {
+      gsap.from(allElements.slice(15), {
+        opacity: 0,
+        y: '3rem',
+        duration: 0.5,
+        delay: 0.2 + 0.05 * 15,
+        ease: 'power2.out',
+      })
+    }
+
     // Post Date
     if (dateElement) {
       gsap.from(dateElement, {
         opacity: 0,
-        y: '1rem',
-        duration: 0.3,
-        delay: 0.1,
+        y: '1.5rem',
+        duration: 0.5,
+        delay: 0.2,
         ease: 'power2.out',
       })
     }
@@ -52,8 +50,8 @@ function setupPostPageAnimation() {
       gsap.from(tocIcon, {
         opacity: 0,
         y: '0.5rem',
-        duration: 0.3,
-        delay: 0.125,
+        duration: 0.5,
+        delay: 0.2,
         ease: 'power2.out',
       })
     }
@@ -62,9 +60,9 @@ function setupPostPageAnimation() {
     if (tocListChildren.length > 0) {
       gsap.from(tocListChildren, {
         opacity: 0,
-        y: '1rem',
-        duration: 0.3,
-        delay: 0.15,
+        y: '1.5rem',
+        duration: 0.5,
+        delay: 0.2,
         ease: 'power2.out',
         stagger: 0.025,
       })
@@ -75,8 +73,30 @@ function setupPostPageAnimation() {
       gsap.from(backButton, {
         opacity: 0,
         x: '0.5rem',
-        duration: 0.3,
-        delay: 0.15,
+        duration: 0.5,
+        delay: 0.2,
+        ease: 'power2.out',
+      })
+    }
+  }
+  else {
+    // Post Content + Tags + Comments
+    // First 7 elements
+    gsap.from(allElements.slice(0, 7), {
+      opacity: 0,
+      y: '3rem',
+      duration: 0.5,
+      delay: 0.2,
+      ease: 'power2.out',
+      stagger: 0.05,
+    })
+    // Rest elements as the 8 element
+    if (allElements.length > 7) {
+      gsap.from(allElements.slice(7), {
+        opacity: 0,
+        y: '3rem',
+        duration: 0.5,
+        delay: 0.2 + 0.05 * 5,
         ease: 'power2.out',
       })
     }
@@ -86,9 +106,9 @@ function setupPostPageAnimation() {
   if (isSmallScreen && tocContainer) {
     gsap.from(tocContainer, {
       opacity: 0,
-      y: '2rem',
-      duration: 0.3,
-      delay: 0.1,
+      y: '3rem',
+      duration: 0.5,
+      delay: 0.15,
       ease: 'power2.out',
     })
   }

src/components/Widgets/TOC.astro

@@ -96,7 +96,7 @@ const filteredHeadings = headings.filter(heading =>
   --at-apply: 'font-semibold ml-4 2xl:hidden';
 }
 .toc-list {
-  --at-apply: 'list-none pb-3.3 pl-0 space-y-2 mt-1 mb-4 2xl:space-y-1.2';
+  --at-apply: 'mb-4 mt-1 list-none pl-0 space-y-2 2xl:(pb-3.3 space-y-1.2)';
 }
 .toc-link-h2, .toc-link-h3, .toc-link-h4 {
   --at-apply: 'text-sm no-underline font-normal text-balance 2xl:(text-3.2 c-secondary/60 transition-colors transition-font-weight duration-300 ease-out hover:(c-secondary font-medium))';

src/layouts/Layout.astro

@@ -52,5 +52,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
     <Button supportedLangs={supportedLangs} />
     <GithubCard />
     <PhotoSwipe />
+    <!-- Fix bottom space being cut off before page transition on mobile -->
+    <div class="fixed bottom-0 w-full"></div>
   </body>
 </html>

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 ease-out lg:duration-250';
+  --at-apply: 'origin-bottom-right scale-x-0 transition-transform ease-out lg:duration-300';
 }
 
 /* Fix Highlight Position Issue on iOS */

src/styles/transition.css

@@ -1,6 +1,6 @@
 /* View Transition */
 ::view-transition-new(animation-theme-toggle) {
-  animation: reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
   clip-path: inset(0 0 0 0);
   z-index: 99;
 }