Refine animation of moving names

yoshikouki · Aug 31, 2024 · f835a06 · f835a06
1 parent f7ff3df
commit f835a06
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/app/activities/[id]/page.tsx b/src/app/activities/[id]/page.tsx
@@ -8,7 +8,14 @@ export default async function ActivitiesPage({
   return (
     <main className="flex flex-col items-center justify-center gap-10 py-10">
       <div className="flex flex-col gap-5">
-        <h1 className="font-bold text-2xl">{activity.name}</h1>
+        <h1
+          className="font-bold text-2xl"
+          style={{
+            viewTransitionName: `activity-${activity.id}`,
+          }}
+        >
+          {activity.name}
+        </h1>
         <div className="text-gray-500">
           {activity.latestLog.loggedAt} days ago
         </div>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -13,6 +13,9 @@ export default async function HomePage() {
             <AnimatedLink
               href={url.activity(activity.id)}
               className="font-bold text-lg"
+              style={{
+                viewTransitionName: `activity-${activity.id}`,
+              }}
             >
               {activity.name}
             </AnimatedLink>