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.
In this section you can utilize the motion component attributes named whileInView and viewport to animate elements when they come into view.