28. Animate Presence

Here’s an example use of Animate Presence, which lets you animate an element just before it will be removed (unmounted) from the DOM tree.

The smallest motion.div is wrapped inside an <AnimatePresence> component. When you give it an exit property (with the values to animate to), it will animate just before being removed (when isVisible becomes false).

export function Example() {
    const [isVisible, setVisible] = useState(true);

    return (
        <motion.div
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "rgba(255,255,255,0.5)",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                cursor: "pointer"
            }}
            onTap={() => setVisible(!isVisible)}
        >
            <AnimatePresence>
                {isVisible && (
                    <motion.div
                        style={{
                            width: 80,
                            height: 80,
                            borderRadius: 15,
                            backgroundColor: "#fff"
                        }}
                        initial={{ opacity: 0, scale: 0.75 }}
                        animate={{ opacity: 1, scale: 1 }}
                        exit={{ opacity: 0, scale: 0 }}
                    />
                )}
            </AnimatePresence>
        </motion.div>
    );
}