framer motion hero animation code example
Example: fremer motion react library
const [selectedId, setSelectedId] = useState(null) <AnimateSharedLayout type="crossfade"> {items.map(item => ( <motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)}> <motion.h5>{item.subtitle}</motion.h5> <motion.h2>{item.title}</motion.h2> </motion.div> ))} <AnimatePresence> {selectedId && ( <motion.div layoutId={selectedIdentifier}> <motion.h5>{item.subtitle}</motion.h5> <motion.h2>{item.title}</motion.h2> <motion.button onClick={() => setSelectedId(null)} /> </motion.div> )} </AnimatePresence></AnimateSharedLayout>