I'm just wondering if there is an easy way of achieving what my design theme wants for the animations on our website. I have a React website and we are using Framer Motion for animations. My current problem is that I'm not sure we can achieve this animation with our current architecture, we are transitioning between pages by replacing components, I have two screens let's say Comp1 and Comp2 both have a div inside that is very similar, I want to do a transition when Comp1 gets unmounted that div needs to grow to the size of the one that is no Comp2. The div on comp1 can have different sizes based on what is inside but the div on Comp2 is always bigger.
Hope my explanation is not too confusing.
Is there a way to achieve this?
Kind of a loaded question, but yes. Framer Motion has two features I think you'd find helpful:
Layout Animations are useful when, as the name implies, you want to animate any sort of layout change that happens due to a re-render (reordering a list, width change, etc.) Layout Animations should cover most of what you are trying to do.
AnimatePresence is very useful for animating components when they are mounting/unmounting.