Framer motion - simple menu animation

#react #framermotion #animation #tailwindcss

Let's see how to create a simple menu animation.
For the style, we will use tailwindcss.

we will have a container that contains the flex layout and background color.
For animate layout change across multi-component, we will need to use AnimateSharedLayout.
inside we have a wrapper that will control the on-click selection and have a nice animation opacity effect.
inside will contain text and a condition on when an item is selected then framer motion layout animation will give is power for a nice underline animation,

full code & example -