When changing layout (flex-direction) with animation on hover, sometimes the content jumps unexpectedly, is my code wrong?

[muchisx]

Hi! ☀️

So as I described in the title, I'm using an animation on the change of layout, namely the flex direction and sometimes the animations behaves weirdly, more specifically when the cursors traverses the element too fast.

I have a fairly complex Button Component where I'm using it and I'm also using styled-components.

Here's a demo of the issue:

Recording.2023-04-30.202833.mp4

You can see that when I hover slowly it works well, but when I hover too fast it goes crazy!

Here's the code for the parent component:

import { useState } from 'react';
import { SpanStyled, ButtonStyled, Container, IconWrap, LinkStyled } from './Button.styles';
import type { Props } from './Button.types';

function Button(props: Props) {
  const { role, to, text, variant, Icon, action, className, newTab, rel } = props;
  const target = newTab ? '_blank' : '_self';
  const [isHovered, setIsHovered] = useState(false);

  const handleHover = () => {
    setIsHovered((current: boolean) => !current);
  };

  const buttonContent = (
    <>
      {text && <SpanStyled layout>{text}</SpanStyled>}
      {Icon && (
        <IconWrap layout>
          <Icon size={16} />
        </IconWrap>
      )}
    </>
  );

  const hoverAnimation = (buttonIcon?: Props['Icon'], buttonText?: Props['text']) => {
    const animation =
      buttonIcon && buttonText ? undefined : { scale: 1.1, transition: { ease: 'circIn', duration: 0.4 } };
    return animation;
  };

  return (
    <Container
      variant={variant}
      text={text}
      Icon={Icon}
      onMouseEnter={handleHover}
      onMouseLeave={handleHover}
      whileHover={hoverAnimation(Icon, text)}
      onClick={action}
      className={className}
      isHovered={isHovered}
    >
      {role === 'button' ? (
        <ButtonStyled>{buttonContent}</ButtonStyled>
      ) : (
        <LinkStyled to={to ?? ''} target={target} rel={rel}>
          {buttonContent}
        </LinkStyled>
      )}
    </Container>
  );
}

Button.defaultProps = {
  text: undefined,
  className: undefined,
  Icon: undefined,
};

export default Button;

And here's the code for the styled component:

import styled, { css } from 'styled-components';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import type { Props } from './Button.types';

type ContainerProps = {
  Icon?: Props['Icon'];
  variant: Props['variant'];
  text?: Props['text'];
  isHovered: boolean;
};

export const ButtonStyled = styled(motion.button)``;
export const LinkStyled = styled(motion(Link))``;
export const SpanStyled = styled(motion.span)``;
export const IconWrap = styled(motion.div)``;
export const Container = styled(motion.div)<ContainerProps>`
  flex-shrink: 0;
  width: fit-content;
  height: fit-content;
  cursor: pointer;
  border-radius: ${(props) => (props.text ? '100px' : '50%')};
  color: var(--btn-color-text-${(props) => props.variant});
  background: var(--btn-color-bg-${(props) => props.variant});
  border: 1px solid var(--btn-color-border-${(props) => props.variant});
  padding: ${(props) => (props.text ? (props.Icon ? '.2rem .2rem .2rem 1.4rem' : '.7rem 1.4rem') : '.6rem')};
  transition: padding 200ms ease-in-out;

  &:hover {
    ${(props) => props.text && props.Icon && 'padding: .2rem 1.4rem .2rem .2rem '};
  }

  & ${IconWrap} {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--btn-color-${(props) => (props.text ? `icon-${props.variant}` : `text-${props.variant}`)});
    ${(props) =>
      props.text &&
      css`
        padding: 4px;
        background-color: var(--btn-color-icon-bg-${props.variant});
      `}
  }

  & ${LinkStyled}, ${ButtonStyled} {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    ${(props) =>
      props.isHovered &&
      props.Icon &&
      props.text &&
      css`
        flex-direction: row-reverse;
      `}
  }

  & ${LinkStyled} {
    color: inherit;
    text-decoration: none;
  }

  & ${SpanStyled} {
    line-height: 1;
  }
`;