Exploring the world of Framer motion
A simple hover animation where motion lets you add a whileHover prop to the element and you get this nicely smooth animation out of the box.
An enter animation item, where you can specify an initial satate opacity of 0 and end state of opacity of 1. you could also animate the x, y, z axis. in motion the default animation transition duration is somewhere between 0.3 to 0.8 if user do not specify the duration
Unlike simple Enter animation above. we can use `Variants` to have a named properties and orchestrate the children animation. we can also add staggered delay for each children like below.