update

src/components/AnimationMotion.tsx

@@ -41,6 +41,40 @@ export const pageVariants = {
     ease: "anticipate",
     duration: 0.7
   };
+ export const modal = {
+    hidden: { opacity: 0, scale: 0 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: 'spring',
+        bounce: 0.25,
+        duration: 0.5, 
+        delay: 0
+      }
+    },
+    exit: {
+      opacity: 0,
+      scale: 0,
+      transition: {
+        ease: 'easeInOut'
+      }
+    }
+  }
+ export const CardProject = {
+    offscreen: {
+      y: 90
+    },
+    onscreen: {
+      y: 0,
+      rotate: 0,
+      transition: {
+        type: "spring",
+        bounce: 0.4,
+        duration: 0.05
+      }
+    }
+  };
 
 
 

src/components/CatalogProject.tsx

@@ -12,6 +12,8 @@ import { TstateModalProject,TstateTheme } from '@/types/Types';
 import { useContext } from 'react';
 import { MyContext } from '@/context/MyContext';
 import { motion } from 'framer-motion';
+import { CardProject } from './AnimationMotion';
+
 
 function CatalogProject({Modal,setModal}:TstateModalProject) {
 const StyleForTechs = ' pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
@@ -21,7 +23,9 @@ const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  bo
 const TheForTech = ThemeIsDark ? 'bg-slate-900':
 'bg-gray-200' ;
 
-return (<li className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>
+
+return (<motion.li variants={CardProject}
+className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>
 
 <div>
 
@@ -34,8 +38,8 @@ return (<li className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border
 className={` border-black rounded-xl  inline max-h-40 cursor-pointer w-screen400:border-[0.4rem] border-[0.5rem] `}/>
 
 <Image src={CatalogMobileImg} alt='image'  onClick={()=> setModal({IsOpen:true,img:CatalogMobileImg})}
-className={` border-black rounded-xl border-4 inline z-10 relative right-10 top-8 max-h-[8.6rem] cursor-pointer 
-w-screen400:max-h-[5.7rem] w-screen400:rounded-md w-screen400:border-[3px] w-screen400:top-[3.7rem]`}/>
+className={` border-black rounded-xl border-4 inline  relative right-10 top-8 max-h-[8.6rem] cursor-pointer 
+w-screen400:max-h-[5.7rem] w-screen400:rounded-md w-screen400:border-[3px] w-screen400:top-[3.7rem] `}/>
 
 </div>
 
@@ -69,7 +73,7 @@ className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2
 
 </div>
 
-</li>
+</motion.li>
 ) 
 
 }

src/components/MyProjects.tsx

@@ -3,11 +3,14 @@ import RegistMemberProject from './RegistMemberProject';
 import ModalProject from '@/modals/ModalProject';
 import { TmodalProject } from '@/types/Types';
 import { useState } from 'react';
+import { motion } from "framer-motion";
+
 
 function MyProjects() {
 const [Modal,setModal] = useState<TmodalProject>({IsOpen:false,img:''})
 
-return (<section className=' flex flex-col justify-around mb-8'>
+return ( <motion.section initial="offscreen" whileInView="onscreen" viewport={{ once: true, amount: 0.5 }}
+className=' flex flex-col justify-around mb-8'>
 
     <h4 className=' text-3xl text-center mb-6'>Meus projetos</h4>
 <ul className='flex flex-wrap  w-screen850:justify-center justify-around gap-6'>
@@ -19,7 +22,7 @@ return (<section className=' flex flex-col justify-around mb-8'>
 
 <ModalProject Modal={Modal} setModal={setModal}/>
 
-</section> 
+</motion.section> 
 
 )
 

src/components/RegistMemberProject.tsx

@@ -12,6 +12,9 @@ import { FaCss3Alt } from "react-icons/fa";
 import { TstateModalProject,TstateTheme } from '@/types/Types';
 import { useContext } from 'react';
 import { MyContext } from '@/context/MyContext';
+import { motion } from 'framer-motion';
+import { CardProject } from './AnimationMotion';
+
 
 function RegistMemberProject({Modal,setModal}:TstateModalProject) {
     const StyleForTechs = ' pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
@@ -21,7 +24,8 @@ function RegistMemberProject({Modal,setModal}:TstateModalProject) {
     const TheForTech = ThemeIsDark ? 'bg-slate-900':
     'bg-gray-200' ;  
 
-    return (<li className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>
+    return (<motion.li variants={CardProject} 
+    className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>
 
     <div>
 
@@ -34,7 +38,7 @@ function RegistMemberProject({Modal,setModal}:TstateModalProject) {
 className={` border-black rounded-xl  inline max-h-40 cursor-pointer w-screen400:border-[0.4rem] border-[0.5rem] `}/>
 
 <Image src={RegistMobileImg} alt='image'  onClick={()=> setModal({IsOpen:true,img:RegistMobileImg})}
-className={` border-black rounded-xl border-4 inline z-10 relative right-10 top-8 max-h-[8.6rem] cursor-pointer 
+className={` border-black rounded-xl border-4 inline relative right-10 top-8 max-h-[8.6rem] cursor-pointer 
 w-screen400:max-h-[5.7rem] w-screen400:rounded-md w-screen400:border-[3px] w-screen400:top-[3.7rem]`} />
 
 </div>
@@ -79,7 +83,7 @@ w-screen400:max-h-[5.6rem] w-screen400:rounded-md w-screen400:border-[3px] w-scr
 
     </div>
 
-</li>
+</motion.li>
 ) 
 
 }

src/modals/ModalProject.tsx

@@ -3,22 +3,22 @@ import style from './ModalProject.module.css'
 import Image from "next/image"
 import { IoClose } from "react-icons/io5";
 import { motion } from 'framer-motion';
-import { pageVariantsModal,pageTransitionModal } from "@/components/AnimationMotion";
-
+import { pageVariantsModal,pageTransitionModal,modal } from "@/components/AnimationMotion";
 
 function ModalProject({Modal,setModal}:TstateModalProject) {
 
+
 return (<>
 { Modal.IsOpen && <motion.div onClick={()=>setModal({IsOpen:false,img:''})}
    className={`${style.containerMod} `} 
-    animate="in" 
-   exit="out" 
-   variants={pageVariantsModal} 
-   transition={pageTransitionModal} >
+   variants={modal}
+   initial="hidden"
+   animate="visible"
+   exit="exit">
 
 <div className={`${style.divScroll}`}>
 
-   <div className={`${style.dadSquare}`}    >
+   <div className={`${style.dadSquare}`}   >
 <p className={`${style.btnCloseMod}`}> <IoClose/></p>
 <Image onClick={(e)=> e.stopPropagation()} src={Modal.img} alt="imagem"
 className={`${style.squareMod }`}/>