Letter Swap Forward Anim

1"use client"
2 
3import { useState } from "react"
4import { AnimationOptions, motion, stagger, useAnimate } from "motion/react"
5 
6interface TextProps {
7  label: string
8  reverse?: boolean
9  transition?: AnimationOptions
10  staggerDuration?: number
11  staggerFrom?: "first" | "last" | "center" | number
12  className?: string
13  onClick?: () => void
14}
15 
16const LetterSwapForward = ({
17  label,
18  reverse = true,
19  transition = {
20    type: "spring",
21    duration: 0.7,
22  },
23  staggerDuration = 0.03,
24  staggerFrom = "first",
25  className,
26  onClick,
27  ...props
28}: TextProps) => {
29  const [scope, animate] = useAnimate()
30  const [blocked, setBlocked] = useState(false)
31 
32  const hoverStart = () => {
33    if (blocked) return
34 
35    setBlocked(true)
36 
37    // Function to merge user transition with stagger and delay
38    const mergeTransition = (baseTransition: AnimationOptions) => ({
39      ...baseTransition,
40      delay: stagger(staggerDuration, {
41        from: staggerFrom,
42      }),
43    })
44 
45    animate(
46      ".letter",
47      { y: reverse ? "100%" : "-100%" },
48      mergeTransition(transition)
49    ).then(() => {
50      animate(
51        ".letter",
52        {
53          y: 0,
54        },
55        {
56          duration: 0,
57        }
58      ).then(() => {
59        setBlocked(false)
60      })
61    })
62 
63    animate(
64      ".letter-secondary",
65      {
66        top: "0%",
67      },
68      mergeTransition(transition)
69    ).then(() => {
70      animate(
71        ".letter-secondary",
72        {
73          top: reverse ? "-100%" : "100%",
74        },
75        {
76          duration: 0,
77        }
78      )
79    })
80  }
81 
82  return (
83    <span
84      className={`flex justify-center items-center relative overflow-hidden  ${className} `}
85      onMouseEnter={hoverStart}
86      onClick={onClick}
87      ref={scope}
88      {...props}
89    >
90      <span className="sr-only">{label}</span>
91 
92      {label.split("").map((letter: string, i: number) => {
93        return (
94          <span
95            className="whitespace-pre relative flex"
96            key={i}
97            aria-hidden={true}
98          >
99            <motion.span className={`relative letter`} style={{ top: 0 }}>
100              {letter}
101            </motion.span>
102            <motion.span
103              className="absolute letter-secondary "
104              style={{ top: reverse ? "-100%" : "100%" }}
105            >
106              {letter}
107            </motion.span>
108          </span>
109        )
110      })}
111    </span>
112  )
113}
114 
115export default LetterSwapForward