added animation to the main page

sergeylitvinenko1 · Feb 19, 2024 · 4fc6375 · 4fc6375
1 parent fd51f0c
commit 4fc6375
Showing 1 changed file with 6 additions and 18 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,8 +2,8 @@ import styles from '@/app/ui/home.module.css';
 import { montserrat } from '@/app/ui/fonts';
 import Image from 'next/image';
 import { Metadata } from 'next';
-import { motion } from 'framer-motion'
 import Link from 'next/link';
+import AnimatedText from '../components/annimation';
 
 export const metadata: Metadata = {
   title: 'Sergey Litvinenko',
@@ -13,23 +13,11 @@ export default function Page() {
   return (
     <div className={styles.container}>
       <main className={styles.main}>
-        <motion.div initial="hidden" animate="visible" variants={{
-          hidden: {
-            scale: .8,
-            opacity:0
-          },
-          visible: {
-            scale: 1,
-            opacity: 1,
-            transition: {
-              delay: .4
-            }
-          },
-        }}>
-          <h1 className={`${montserrat.className} text-xl md:text-3xl md:leading-normal`}>
-            My name is Sergey Litvinenko
-          </h1>
-        </motion.div>
+
+        <h1 className={`${montserrat.className} text-xl md:text-3xl md:leading-normal`}>
+          <AnimatedText text="My name is Sergey Litvinenko"/>
+        </h1>
+
         <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">