text disappears if you unhover mid-animation

Question

I have a simple button component with some text animation.

The animation works fine on hover, but the text disappears if I unhover quickly or if unhover mid-animation.

Here is the content of my component:

index.tsx

import { motion } from "framer-motion";
import styles from "./styles.module.scss";

interface ButtonProps {
  isActive: boolean;
  toggleMenu: () => void;
}

const Button: React.FC<ButtonProps> = ({ isActive, toggleMenu }) => {
  return (
    <div className={styles.button}>
      <motion.div
        className={styles.slider}
        animate={{ top: isActive ? "-100%" : "0%" }}
        transition={{ duration: 0.5, type: "tween", ease: [0.76, 0, 0.24, 1] }}
      >
        <div className={styles.el} onClick={toggleMenu}>
          <PerspectiveText label="القائمة" />
        </div>
        <div className={styles.el} onClick={toggleMenu}>
          <PerspectiveText label="إغلق" />
        </div>
      </motion.div>
    </div>
  );
};

interface PerspectiveTextProps {
  label: string;
}

const PerspectiveText: React.FC<PerspectiveTextProps> = ({ label }) => {
  return (
    <div className={styles.perspectiveText}>
      <p>{label}</p>
      <p>{label}</p>
    </div>
  );
};

export default Button;

And here is the style(the animation relies on the .perspectiveText class):

styles.module.scss

.button {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 100px;
  height: 40px;
  cursor: pointer;
  border-radius: 25px;
  overflow: hidden;

  .slider {
    position: relative;
    width: 100%;
    height: 100%;

    .el {
      width: 100%;
      height: 100%;
      background-color: #c9fd74;
      p {
        margin: 0px;
      }
      &:nth-of-type(2) {
        background-color: black;
        p {
          color: #c9fd74;
        }
      }
      &:hover {
        .perspectiveText {
          transform: rotateX(90deg);
          p {
            &:nth-of-type(1) {
              transform: translateY(-100%);
              opacity: 0;
            }
            &:nth-of-type(2) {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}

.perspectiveText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
  p {
    transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
    margin: 0;
    &:nth-of-type(2) {
      position: absolute;
      transform-origin: bottom center;
      transform: rotateX(-90deg) translateY(50%);
      opacity: 0;
    }
  }
}

Answer 1

The issue is in the opacity during the transformation.

p { &:nth-of-type(1) { transform: translateY(-100%); opacity: 0; // here } }