import { useState } from 'react' import { motion, AnimatePresence } from 'framer-motion' export default function App() { const [activeItem, setActiveItem] = useState<ItemType | null>(null) return ( <main className="relative flex h-screen w-full flex-col items-center justify-center gap-5 overflow-hidden px-4 py-10"> <div className="relative flex h-[554px] w-full flex-col items-center justify-end"> <AnimatePresence> {activeItem && ( <div className="flex w-full items-center justify-center"> <motion.img layoutId={`photo-${activeItem.alt}`} key={activeItem.alt} onClick={() => setActiveItem(null)} style={{ borderRadius: 12, width: 592, height: 422 }} className="flex cursor-pointer items-center justify-center overflow-hidden bg-slate-100 object-cover" src={activeItem.src} alt={activeItem.alt} transition={{ duration: 0.5, type: 'spring', stiffness: 200, damping: 30, }} /> </div> )} </AnimatePresence> <div className="flex w-full items-center justify-center gap-2 px-4 pt-8"> {PHOTOS.filter((item) => item !== activeItem).map((item) => ( <motion.img key={item.alt} layoutId={`photo-${item.alt}`} onClick={() => setActiveItem(item)} style={{ borderRadius: 8, width: 100, height: 100 }} className="flex-shrink-0 cursor-pointer overflow-hidden bg-slate-100 object-cover" src={item.src} alt={item.alt} transition={{ duration: 0.5, type: 'spring', stiffness: 200, damping: 30, }} /> ))} </div> </div> </main> ) } type ItemType = { src: string alt: string height: number } const PHOTOS: ItemType[] = [ { src: 'photo-1.jpg', alt: 'Photo-1', height: 280, }, { src: 'photo-2.jpg', alt: 'Photo-2', height: 200, }, { src: 'photo-3.jpg', alt: 'Photo-3', height: 260, }, { src: 'photo-4.jpg', alt: 'Photo-4', height: 250, }, { src: 'photo-5.jpg', alt: 'Photo-5', height: 110, }, { src: 'photo-6.jpg', alt: 'Photo-6', height: 300, }, { src: 'photo-7.jpg', alt: 'Photo-7', height: 140, }, ]

Gallery Interaction 2

Code

Stacks

X ( Twitter ) Post