added animation upon opening component

Author: si-mooon

src/components/InfoComponent.tsx

@@ -3,7 +3,7 @@ import Image from 'react'
 const InfoComponent = () => {
   return (
     <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
-
+        
         {/* Title */}
         <h1 className="text-center text-5xl tracking-widest text-green-400">
             GLORPYTHON

src/components/LevelComponent.tsx

@@ -5,7 +5,7 @@ import InfoComponent from './InfoComponent'
 export default function LevelComponent() {
 
   return (
-    <div className="w-screen h-screen flex gap-10 p-4 font-mono overflow-hidden">
+    <div className="animate-[zoomIn_0.3s_ease-out_forwards] origin-center w-screen h-screen flex gap-10 p-4 font-mono overflow-hidden">
       <div className="flex gap-4 p-4 w-6/7 mx-auto">
 
         <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
@@ -14,7 +14,23 @@ export default function LevelComponent() {
         <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
           <OutputComponent />
         </div>
+
+      </div>
+          
+      <style>{`
+        @keyframes zoomIn {
+          from { transform: scaleY(0); }
+          to   { transform: scaleY(1); }
+        }
+        .zoom-in {
+          animation: zoomIn 0.3s ease-out forwards;
+          transform-origin: center;
+        }
+      `}</style>
+      <div className="zoom-in">
+        {/* your content */}
       </div>
+    
 
     </div>
   )

src/index.css

@@ -7,3 +7,16 @@
     }
 }
 }
+
+animation: var(--animate-bounce); /* bounce 1s infinite */
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}

src/pages/home/Home.tsx

@@ -4,14 +4,22 @@ import LevelComponent from "../../components/LevelComponent";
 // The home page of the application.
 
 
-function Home() {
+export default function Home() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [mountKey, setMountKey] = useState(0);
 
-    return (
-        <div>
-            <LevelComponent />
-        </div>
-        
-    );
-}
+  const handleToggle = () => {
+    if (!isVisible) setMountKey(k => k + 1);
+    setIsVisible(v => !v);
+  };
 
-export default Home;
+  return (
+    <div>
+      <button onClick={handleToggle}>
+        {isVisible ? 'Hide' : 'Show'} Component
+      </button>
+
+      {isVisible && <LevelComponent key={mountKey} />}
+    </div>
+  );
+}

tailwind.config.js

@@ -0,0 +1,16 @@
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        zoomIn: {
+          '0%':   { transform: 'scale(0)' },
+          '100%': { transform: 'scale(1)' },
+        },
+      },
+      animation: {
+        'zoom-in': 'zoomIn 0.3s ease-out forwards',
+      },
+    },
+  },
+};

tsconfig.app.json

@@ -21,5 +21,5 @@
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src", "tailwind.config.js"]
 }