imporve: EyeToggleIcon slash animation

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,7 +69,7 @@ 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" },
                     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 }}
+                variants={slashVariants}
-                transition={{
+                animate={slash ? 'exit' : 'enter'}
-                    pathLength: { duration: 0.3, ease: "easeInOut" }, 
-                    opacity: { duration: 0.2, ease: "easeInOut", delay: slash ? 0.1 : 0 }
-                }}
             />
         </svg>
     );