Framer Motion Examples

Core concept:

• <motion.* /> is the core component
• All intermediate values (which are later used in Animation) are generated using interpolation
• Start and end values are passed using initial & animate props, respectively. You can also pass series of values/states as in keyframes to animate prop.
• Duration and animation flow is controlled using transition prop.
• MotionValue instance is used under the hood to update visual properties without triggering React render cycle.
• Apart from declarative (<motion.*/>) animations, Framer Motion also provide animate which allows to take manual control over animation playback.
• layout prop let you animate between 2 layouts with ease.