From 84e63459366db61c6324a3ca2ee115e1123d8061 Mon Sep 17 00:00:00 2001
From: Alvalen <alvalen.shafel04@gmail.com>
Date: Fri, 19 Apr 2024 20:53:30 +0700
Subject: [PATCH] fix: animation issue with css property

---
 app/(root)/page.jsx   | 6 +++---
 app/about/page.jsx    | 2 +-
 app/projects/page.jsx | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/(root)/page.jsx b/app/(root)/page.jsx
index c2cadb6..8280b94 100644
--- a/app/(root)/page.jsx
+++ b/app/(root)/page.jsx
@@ -134,7 +134,7 @@ const MyPage = () => {
 							<div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col overflow-hidden">
 								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 									<motion.div
-										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
+										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
 										initial={{
 											x: 300,
 											opacity: 0,
@@ -203,7 +203,7 @@ const MyPage = () => {
 							<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
 								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 									<motion.div
-										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
+										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 "
 										initial={{
 											x: 300,
 											opacity: 0,
@@ -276,7 +276,7 @@ const MyPage = () => {
 							<div className="relative md:h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
 								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 									<motion.div
-										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
+										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
 										initial={{
 											x: 300,
 											opacity: 0,
diff --git a/app/about/page.jsx b/app/about/page.jsx
index eef8eff..5ab119e 100644
--- a/app/about/page.jsx
+++ b/app/about/page.jsx
@@ -38,7 +38,7 @@ export default function Page() {
 							initial={{ scale: 1 }}
 							animate={{ scale: 1.6 }}
 							transition={{ ease: "circOut", duration: 1 }}
-							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300">
+							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
 							<Image
 								src={Me2}
 								alt="Alvalens"
diff --git a/app/projects/page.jsx b/app/projects/page.jsx
index f238c48..b12f9b9 100644
--- a/app/projects/page.jsx
+++ b/app/projects/page.jsx
@@ -114,7 +114,7 @@ export default function Page() {
 							initial={{ scale: 1 }}
 							animate={{ scale: 1.6 }}
 							transition={{ duration: 1, ease: "circOut" }}
-							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300">
+							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 ">
 							<Image
 								src={ProjectAll}
 								alt="Alvalens"