danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

imporve: EyeToggleIcon slash animation

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-11 23:46:44 +03:30
parent c148936657
commit d660641ba4
1 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/icons/EyeToggleIcon.tsx
+28 -8
View File
@@ -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>
);