AnimatedDisplayCard.js

import { useState, useEffect, useRef } from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle } from 'reactstrap';
import { useSpring, animated } from 'react-spring';

const AnimatedDisplayCard = ({ item }) => {
    const { image, name, description } = item;
  
    // Set up some animation pieces of state
    const [toggle, setToggle] = useState(false);
    const [opacity, setOpacity] = useState(1);

    // Use the pieces of state to make a new animation destination
    const animatedStyle = useSpring({
        opacity: opacity,
        transform: toggle ? 'scale(1,1)' : 'scale(1,0)',
        config: { duration: 500 }
    });

    // // Have some way your state changes
  
    useEffect(() => {
        setOpacity(1);
        setToggle(true);
    }, []);

    const onButtonClick = () => {
        setToggle(false);
    }

    // Tell a animated.div to animate to that destination
    return (
        <animated.div style={animatedStyle}>
            <button onClick={onButtonClick}>Hide</button>
            <Card>
                <CardImg src={image} alt={name} />
                <CardBody>
                    <CardTitle>{name}</CardTitle>
                    <CardText>{description}</CardText>
                </CardBody>
            </Card>
        </animated.div>
    );
};

export default AnimatedDisplayCard;