mix-blend-difference doesn't work with rotate

[lazlothemonkey]

I am trying to create a hover effect, where the span moves over the text, inverting the text color along the way. I also want the text to be rotated (just rotated, not rotating animation).

Here, the hover effect works, but without rotation:

<motion.div
          initial={{
            x: 50,
            y: 5,
            opacity: 0,
            // rotate: 5,
          }}
          animate={{
            x: 0,
            y: 0,
            opacity: 1,
            // rotate: 5,
          }}
          className="
              absolute
              top-[44px]
              left-[25px]
              px-1
              cursor-pointer
              text-black
              group
              py-[2px]
            "
        >
          <div className='relative'>
            <span className="absolute inset-0 z-20 bg-white mix-blend-difference w-[0%] group-hover:w-[100%] transition-[width]" />
            about
          </div>
        </motion.div>

However as soon as I turn on the "rotate", this breaks the hover effect. How can this be fixed?

[hajirasyafi]

You have to use whileHover on span, dont use css.
<motion.span whileHover={{width: "100%"}}></motion.span>