8. While drag

Use whileDrag to change how an element looks when you pick it up. Here we have a draggable box with whileHover, whileTap, and whileDrag animations:

export function Example() {
    return (
        <motion.div
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "#fff",
                opacity: 0.7,
            }}
            drag
            whileHover={{ opacity: 1 }}
            whileTap={{
                opacity: 1,
                scale: 1.05,
                boxShadow: "0px 5px 8px #222",
            }}
            whileDrag={{ scale: 1.1, boxShadow: "0px 10px 16px #222" }}
            transition={{ duration: 0.6 }}
        />
    );
}