initial: the state of our element at mount time.

animate: the state in which our element will be at the end of the animation.

transition: how our element goes from the initial state to the target state. This is where we can define which transition type we want to define, delays, or repetitions of the same transition.

whileHover: the state of our element when the mouse is hovering over it.

whileTap: the state of our element when the mouse is clicking on it.

Instead of initial and animate, we can use variants to define different states for our element.

AnimatePresense: a component that allows us to animate elements that are being added or removed from the DOM. Framer Motion will automatically detect and interpolate the changes between the old and new elements.

staggerChildren: a prop that allows us to stagger the children of a container.

Motion values: track the state and velocity of animating values.

Motion values can be created by using the useMotionValue hook

Motion values' state change can be adjusted by using hooks like useSpring or useTransform

Motion values can be used to animate any property of a component, not just CSS properties.

Motion values can be used to create custom animations, like the following example.

Add thedragprop to make an element draggable.

useDragControls: control the drag gesture.

dragConstraints: limit the drag gesture to a specific area.

x and y values of the drag gesture can be used to animate other properties.