How to create clickable links with blinking animation using Framer Motion?

edit

To create clickable links with blinking animation using Framer Motion, you can follow these steps:

1. Import the motion component from Framer Motion library:

   import { motion } from "framer-motion";
   

2. Create a motion anchor tag by wrapping it with motion component:

   const Link = motion.a;
   

3. Set the initial properties for the link component with a variant:

   const linkVariants = {
    initial: {
      opacity: 0.5,
    },
    hover: {
      opacity: 1,
      transition: { duration: 0.5 }
    }
   };
   

4. Add a blinking animation to the link component with another variant:

   const linkBlink = {
    initial: {
      opacity: 1,
    },
    animate: {
      opacity: 0.5,
      transition: { duration: 0.5, repeat: Infinity }
    }
   };
   

5. Combine both variants together in link component:

   <Link
    href="/"
    className="link"
    variants={linkVariants}
    initial="initial"
    whileHover="hover"
    animate="animate"
   >
    Click me!
   </Link>
   

6. Style the link component with CSS:

   .link {
    font-size: 18px;
    color: red;
    text-decoration: none;
    margin: 10px;
   }
   

With these steps, you have created a clickable link with a blinking animation using Framer Motion.