added animation to the buttons at gome page

sergeylitvinenko1 · Feb 20, 2024 · 0a2bd1f · 0a2bd1f
1 parent 4fc6375
commit 0a2bd1f
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 25 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { Metadata } from 'next';
 import Link from 'next/link';
 import AnimatedText from '../components/annimation';
+import AnimatedObject from '../components/animation_transition';
 
 export const metadata: Metadata = {
   title: 'Sergey Litvinenko',
@@ -20,31 +21,37 @@ export default function Page() {
 
         <div className="flex relative top-5 justify-center gap-4 grid-cols-3 grid-rows-1"> 
           <div className="justify-center items-end flex flex-1 flex-row">
-            <div className="text-center">
-              <Link
-                href="/about"
-                className={`${montserrat.className} flex items-center gap-5 self-start rounded-lg bg-yellow-900	px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-yellow-600 md:text-base`}>
-                <span>About</span>
-              </Link>
-            </div>
+            <AnimatedObject>
+              <div className="text-center">
+                <Link
+                  href="/about"
+                  className={`${montserrat.className} flex items-center gap-5 self-start rounded-lg bg-yellow-900	px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-yellow-600 md:text-base`}>
+                  <span>About</span>
+                </Link>
+              </div>
+            </AnimatedObject>
           </div>
           <div className="justify-center items-end flex flex-1 flex-row">
-            <div className="text-center">
-          <Link
-              href="/projects"
-              className={`${montserrat.className} flex items-center gap-5 self-start rounded-lg bg-yellow-900	px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-yellow-600 md:text-base`}>
-              <span>Projects</span>
-          </Link>
-            </div>
+            <AnimatedObject>
+              <div className="text-center">
+                <Link
+                    href="/projects"
+                    className={`${montserrat.className} flex items-center gap-5 self-start rounded-lg bg-yellow-900	px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-yellow-600 md:text-base`}>
+                    <span>Projects</span>
+                </Link>
+              </div>
+            </AnimatedObject>
           </div>
           <div className="justify-center items-end flex flex-1 flex-row">
-            <div className="text-center">
-          <Link
-              href="/contact"
-              className={`${montserrat.className} flex items-center gap-5 self-start rounded-lg bg-yellow-900	px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-yellow-600 md:text-base`}>
-              <span>Contact</span>
-          </Link>
-            </div>
+            <AnimatedObject>
+              <div className="text-center">
+                <Link
+                    href="/contact"
+                    className={`${montserrat.className} flex items-center gap-5 self-start rounded-lg bg-yellow-900	px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-yellow-600 md:text-base`}>
+                    <span>Contact</span>
+                </Link>
+              </div>
+            </AnimatedObject>
           </div>
         </div>
       </main>

diff --git a/components/animation_transition.tsx b/components/animation_transition.tsx
@@ -0,0 +1,26 @@
+'use client'
+import React from 'react';
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+
+const AppearAnimation = styled(motion.div)`
+  opacity: 0;
+  transform: translateY(20px);
+`;
+
+const AnimatedObject = ({ children }: any) => {
+  return (
+    <AppearAnimation
+      initial={{ opacity: 0, translateY: 20 }}
+      animate={{ opacity: 1, translateY: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+
+      {/* Your content goes here */}
+      {children}
+
+    </AppearAnimation>
+  );
+};
+
+export default AnimatedObject;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/node": "^20",