javascript - Onclick disabled when sibling element animates?

Question

I am using framer-motion to animate things.

I made a slider where I press arrow button it will upstate the state to change title. Then I added framer motion so that whenever the title renders it will animate.

I am facing a glitch where upon animation button will not be clickable anymore.

React App

    <>
      <StyledTechNav>
        <MdKeyboardArrowLeft
          title="left-arrow"
          size={size === 'mobile' ? '1.5rem' : '2rem'}
          onClick={decrementIndex}
        />
        <StyledSubject
         initial={{ scale: 0 }}
         animate={{ scale: 1.5 }}
         transition={{
           delay: 0.5,
           duration: 1,
         }}
        >
          {options[index]}
        </StyledSubject>
        <MdKeyboardArrowRight
          title="right-arrow"
          size={size === 'mobile' ? '1.5rem' : '2rem'}
          onClick={incrementIndex}
        />
      </StyledTechNav>
      <StyledTechstack></StyledTechstack>

Styled Component

const StyledTechNav = styled.div`
  ${({ theme }) => {
    return css`
      display: flex;
      justify-self: center;
      align-self: center;
      font-size: ${theme.fonts.size[3]};
      color: ${theme.colors.gray};
      padding: 1rem;

      svg {
        cursor: pointer;
        padding-bottom: 0.25rem;
      }
    `;
  }}
`;

const StyledSubject = styled(motion.h2)`
  ${({ theme }) => {
    return css`
      width: 160px;
      text-align: center;
      ${theme.device.mobile} {
        font-size ${theme.fonts.size[1]};
      }
    `;
  }}
`;

question from:https://stackoverflow.com/questions/65646748/onclick-disabled-when-sibling-element-animates

Answer 1

I would add an animation to the buttons with

pointer event: none; cursor: default; and othe styles that you want at 0% and then pointer event: all; cursor: pointer at 100%, and have this DisableButton animation have the same duration and delay as your other animation. Good luck!