corrections on animations

emanuelpps · Feb 7, 2024 · dfdc09d · dfdc09d
1 parent 8502acc
commit dfdc09d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 24 deletions.
diff --git a/app/about/aboutMe/AboutMe.jsx b/app/about/aboutMe/AboutMe.jsx
@@ -2,28 +2,25 @@
 import React, { useRef } from "react";
 import Image from "next/image";
 import aboutmeImage from "@/public/assets/aboutme-image.png";
-import { AnimatePresence, motion, useInView } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 
 function AboutMe() {
-  const ref = useRef(null);
-  const isInView = useInView(ref);
-
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 grid-rows-1 gap-4 pt-10 md:mt-20 w-full md:w-[60rem]">
       <AnimatePresence>
         <motion.div
-          ref={ref}
-          initial={{ opacity: 0, x: -300 }}
-          animate={{
-            opacity: isInView ? 1 : 0,
-            x: isInView ? 0 : -300,
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{
+            opacity: 1,
+            y: 0,
             transition: {
               type: "spring",
               stiffness: 50,
               damping: 30,
             },
           }}
           exit={{ opacity: 0 }}
+          viewport={{ once: true }}
           id="summary-text-container"
         >
           <h3 className="font-semibold text-md md:pl-10 md:pt-10 text-center md:text-start">

diff --git a/app/about/freeTime/FreeTime.jsx b/app/about/freeTime/FreeTime.jsx
@@ -24,18 +24,18 @@ function FreeTime() {
       </div>
       <AnimatePresence>
         <motion.div
-          ref={ref}
-          initial={{ opacity: 0, x: 300 }}
-          animate={{
-            opacity: isInView ? 1 : 0,
-            x: isInView ? 0 : 300,
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{
+            opacity: 1,
+            y: 0,
             transition: {
               type: "spring",
               stiffness: 50,
               damping: 30,
             },
           }}
           exit={{ opacity: 0 }}
+          viewport={{ once: true }}
           id="free-time-text-container"
         >
           <h3 className="md:pt-10 md:pl-10 font-semibold text-md text-center md:text-start">

diff --git a/app/about/skills/Skills.jsx b/app/about/skills/Skills.jsx
@@ -1,14 +1,28 @@
+'use client';
 import React from "react";
 import Image from "next/image";
 import { frontendIcons } from "@/components/imagesContainer/frontendIcons";
 import { backendIcons } from "@/components/imagesContainer/backendIcons";
 import { nativeIcons } from "@/components/imagesContainer/nativeIcons";
 import { designIcons } from "@/components/imagesContainer/designIcons";
+import { AnimatePresence, motion } from "framer-motion";
 
 function Skills() {
   console.log(frontendIcons);
   return (
-    <div
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{
+        opacity: 1,
+        y: 0,
+        transition: {
+          type: "spring",
+          stiffness: 50,
+          damping: 30,
+        },
+      }}
+      exit={{ opacity: 0 }}
+      viewport={{ once: true }}
       id="skills-container"
       className="grid grid-cols-1 grid-rows-8 w-full md:w-[60rem] md:grid md:grid-cols-1 md:grid-rows-4 md:pt-40"
     >
@@ -135,7 +149,7 @@ function Skills() {
           ))}
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 }
 

diff --git a/app/about/summary/Summary.jsx b/app/about/summary/Summary.jsx
@@ -21,19 +21,19 @@ function Summary() {
       </div>
       <AnimatePresence>
         <motion.div
-          initial={{ x: 800 }}
-          animate={{
-            x: 0,
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{
+            opacity: 1,
+            y: 0,
             transition: {
               type: "spring",
               stiffness: 50,
               damping: 30,
             },
           }}
           exit={{ opacity: 0 }}
+          viewport={{ once: true }}
           id="summary-text-container"
-          className=""
-          whileInView={{ opacity: 1 }}
         >
           <h3 className="font-semibold text-md md:pl-10 md:pt-10 text-center md:text-start">
             Summary

diff --git a/app/works/portfolio/ProjectCard.jsx b/app/works/portfolio/ProjectCard.jsx
@@ -9,9 +9,17 @@ function ProjectCard({ project }) {
 
   return (
     <motion.div
-      initial={{ opacity: 0, y:50}}
-      whileInView={{ opacity: 1, y:0}}
-      exit={{opacity:0}}
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{
+        opacity: 1,
+        y: 0,
+        transition: {
+          type: "spring",
+          stiffness: 50,
+          damping: 30,
+        },
+      }}
+      exit={{ opacity: 0 }}
       viewport={{ once: true }}
       id={`id-${project.id}`}
       className={`flex justify-center text-center md:text-left md:p-10 cursor-pointer window-outline mb-20 ${