From d660641ba409b615b67e1b0a90b9a3d703d980ca Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Mon, 11 Aug 2025 23:46:44 +0330
Subject: [PATCH] imporve: EyeToggleIcon slash animation

---
 src/components/icons/EyeToggleIcon.tsx | 36 ++++++++++++++++++++------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/icons/EyeToggleIcon.tsx b/src/components/icons/EyeToggleIcon.tsx
index acdfd47..b5f41b5 100644
--- a/src/components/icons/EyeToggleIcon.tsx
+++ b/src/components/icons/EyeToggleIcon.tsx
@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { motion, Variants } from "framer-motion";
 import React from "react";
 
 type EyeToggleIconProps = {
@@ -6,6 +6,29 @@ type EyeToggleIconProps = {
 } & React.SVGProps<SVGSVGElement>;
 
 export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props }) => {
+    const slashVariants: Variants = {
+        enter: {
+            pathLength: 1,
+            opacity: 1,
+            pathOffset: 0,
+            transition: {
+                pathOffset: { duration: 0 },
+                pathLength: { duration: 0.3, ease: "easeInOut" },
+                opacity: { duration: 0.2, ease: "easeInOut", delay: 0 }
+            }
+        },
+        exit: {
+            pathLength: 0,
+            opacity: 0,
+            pathOffset: 2,
+            transition: {
+                pathOffset: { duration: 0 },
+                pathLength: { duration: 0.3, ease: "easeInOut" },
+                opacity: { duration: 0.2, ease: "easeInOut", delay: .1 }
+            }
+        },
+    }
+
     return (
         <svg
             width="20"
@@ -46,9 +69,9 @@ export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props })
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 initial={false}
-                animate={{ strokeWidth: slash ? 0 : 1.2, opacity: slash ? 0 : 1 }}
+                animate={{ strokeWidth: slash ? 0 : 2, opacity: slash ? 0 : 1 }}
                 transition={{
-                    strokeWidth: { duration: 0.2, ease: "easeInOut" }, 
+                    strokeWidth: { duration: 0.2, ease: "easeInOut" },
                     opacity: { duration: 0.1, ease: "easeInOut", delay: slash ? 0.1 : 0 }
                 }}
             />
@@ -59,11 +82,8 @@ export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props })
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 initial={false}
-                animate={{ pathLength: slash ? 0 : 1, opacity: slash ? 0 : 1 }}
-                transition={{
-                    pathLength: { duration: 0.3, ease: "easeInOut" }, 
-                    opacity: { duration: 0.2, ease: "easeInOut", delay: slash ? 0.1 : 0 }
-                }}
+                variants={slashVariants}
+                animate={slash ? 'exit' : 'enter'}
             />
         </svg>
     );