xxxxxxxxxx
import { motion } from "framer-motion"
<motion.div animate={{ x: 0, y: 0, scale: 1, rotate: 0, type:"tween" }}/>
xxxxxxxxxx
<motion.div animate={{ x: 0, y: 0, scale: 1, rotate: 0, type:"tween" }}/>
xxxxxxxxxx
const list = { hidden: { opacity: 0 } }
const item = { hidden: { x: -10, opacity: 0 } }
return (
<motion.ul animate="hidden" variants={list}>
<motion.li variants={item} />
<motion.li variants={item} />
<motion.li variants={item} />
</motion.ul>
)
COPY
xxxxxxxxxx
const [selectedId, setSelectedId] = useState(null)
{items.map(item => (
<motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)}>
<motion.h5>{item.subtitle}hi</motion.h5>
<motion.h2>{item.title}</motion.h2>
</motion.div>
))}
<AnimatePresence>
{selectedId && (
<motion.div layoutId={selectedId}>
<motion.h5>{item.subtitle}</motion.h5>
<motion.h2>{item.title}</motion.h2>
<motion.button onClick={() => setSelectedId(null)} />
</motion.div>
)}
</AnimatePresence>