ReactJS - How to animate a code rendered conditionally

below functional component part of the code can only be rendered if the useState variable (selected) is true , i was trying to make this part to be rendered with animation using framer-motion , any suggestion how this can be done? (been using styled component) … appreciate it

const Animal = ({ id, image, title, subtitle }) => {
  const [selected, setSelected] = useState(false);
  const adjustableWidth = selected ? 400 : 200;

  return (
    <AnimalBox
      key={id}
      onMouseEnter={() => {
        setSelected(true);
      }}
      onMouseLeave={() => {
        setSelected(false);
      }}
      style={{ height: adjustableWidth }}
    >
      <AnimalImage src={image} alt={title} />
      {selected && (
        <>
          <AnimalTitle>{title}</AnimalTitle>
          <AnimalSubtitle>{subtitle}</AnimalSubtitle>
        </>
      )}
    </AnimalBox>
  );
};

export default Animal;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.