framer 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>

Tags:

Misc Example