From bba7ad0da677ee0aab00c23c1615a8fe4da02e58 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 7 Nov 2025 00:07:32 +0100
Subject: [PATCH] Use opacity transition instead of display:none

---
 src/components/index-page/how-it-works/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/index-page/how-it-works/index.tsx b/src/components/index-page/how-it-works/index.tsx
index e03ddc1e53..2ea17822db 100644
--- a/src/components/index-page/how-it-works/index.tsx
+++ b/src/components/index-page/how-it-works/index.tsx
@@ -67,7 +67,9 @@ export function HowItWorks() {
           </ol>
         )}
       </div>
-      <FigureInfo className={interacted ? "hidden" : ""} />
+      <FigureInfo
+        className={clsx("transition-opacity", interacted ? "opacity-0" : "")}
+      />
 
       <Button className="mx-auto mt-8 w-fit lg:mt-16" href={TRY_IT_OUT_URL}>
         Try GraphiQL