isuggest.selfce.st
alternative tangled frontend (extremely wip)
refactor: redo animation
+14
-4
src/components/Animated/UnderlineIconRouterLink.tsx
+14
-4
src/components/Animated/UnderlineIconRouterLink.tsx
···
1
1
import { Link } from "@tanstack/react-router";
2
2
import { motion, Transition, Variants } from "motion/react";
3
-
import { ReactNode } from "react";
3
+
import { ReactNode, useState } from "react";
4
4
5
5
export const UnderlineIconRouterLink = ({
6
6
to,
···
12
12
underlineClassName = "bg-[#cba6f7]",
13
13
position = "left",
14
14
iconVariants = {
15
-
hover: { rotate: [0, -10, 10, -10, 10, 0] },
15
+
rest: { rotate: 0 },
16
+
wiggle: { rotate: [0, -10, 10, -10, 10, 0, 0, 0] },
16
17
},
17
-
iconTransitions = { duration: 0.3, ease: "easeInOut" },
18
+
iconTransitions = { duration: 0.25, ease: "easeInOut" },
18
19
target = "_self",
19
20
}: {
20
21
to: string;
···
29
30
iconTransitions?: Transition;
30
31
target?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop";
31
32
}) => {
33
+
const [isIconWiggle, setIsIconWiggle] = useState(false);
34
+
32
35
const iconElement = (
33
36
<motion.div
34
37
variants={iconVariants}
38
+
initial="rest"
35
39
transition={iconTransitions}
36
40
className={iconClassName}
41
+
animate={isIconWiggle ? "wiggle" : "rest"}
37
42
>
38
43
{icon}
39
44
</motion.div>
40
45
);
41
46
42
47
return (
43
-
<motion.div initial="initial" whileHover="hover">
48
+
<motion.div
49
+
initial="initial"
50
+
whileHover="hover"
51
+
onHoverStart={() => setIsIconWiggle(true)}
52
+
onAnimationComplete={() => setIsIconWiggle(false)}
53
+
>
44
54
<Link
45
55
to={to}
46
56
className={`flex cursor-pointer items-center gap-1 ${className}`}