Considering using https://www.framer.com/motion/ or just continuing on the hand rolled css route
Framer Motion Framer .com View on GitHub Motion A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source. Check out the API View on GitHub declarative animations. A simple declarative syntax means you write less code. Less code means your codebase is easier to read and maintain. View the API Tweak the parameters to animate. < motion.div animate = { { x : 0 , y : 0 , scale : 1 , rotate : 0 , } } /> X Y Scale Rotate Animations that When animating between two separate components, Framer Motion will take care of everything in between. Get started Tap to open a card. const [ selectedId , setSelectedId ] = useState ( null ) < AnimateSharedLayout type = " crossfade " > { items . map ( item => ( < motion.div layoutId = { item . id } onClick = { ( ) => setSelectedId ( item . id ) } > < motion.h5 > {...