Framer Motion is a production-ready animation and gesture library. With it you can create beautifully smooth animations with minimal effort, or compose together elaborate sequences of animations with low level APIs. 

These videos showcase some of Framer Motion's key features and how to get started implementing them.

Learn how to apply simple animations with default transitions generated by Framer Motion to any React component.

The animate prop can animate location, scale, and a host of other attributes, and the transition prop can override the generated defaults.

- [Official docs](https://www.framer.com/api/motion/examples/#animation)

Animate a React component's position with the animate prop from Framer Motion

Learn how to apply keyframe animations to React components with Framer Motion by passing an array of values to the animate prop.

The time for each keyframe can be configured with the times prop, and even more options can be set if you don't like the default transitions applied by the library.

- [Official docs](https://www.framer.com/api/motion/examples/#keyframes)

Animate a React component using an array of keyframes from Framer Motion

Learn how to create common button animations by applying gesture recognizers like `whileTap`, `whileHover`, and `onDrag`. Framer Motion offers flexibility in how animations are pieced together but offers sensible defaults for the transitions it applies without you having to mess with transition easing methods.

These props extend React's event listeners to apply powerful gesture detection for animations on components and can be strung together or used for more simple use cases.

Check out the [official docs]([https://www.framer.com/api/motion/gestures/](https://www.framer.com/api/motion/gestures/)) for more information on them.

Animate buttons using gesture controls like whileTap and onDrag from Framer Motion

Learn how to animate components with the transition prop to reverse animations, loop them, adjusting their easing, and more, which are all great for creating loading animations.

The transition prop is a powerful part of Framer Motion that defines "how values animate from one state to another".

Check out the [official docs](https://www.framer.com/api/motion/types/#transition) for more information on how to customize attributes of the transition prop.

Create loading animations with Framer Motion's transition prop

Learn how to animate components based off of React state. Imperatively triggering an animation is a common use case, and one that is easily facilitated with state and Framer's animation APIs. 

You can use it to cycle a component through specific states like rotating or changing the position of an element.

Check out the [official docs](https://www.framer.com/api/motion/utilities/#usecycle) for more information about the `useCycle` hook for toggling between multiple states.


Trigger state-based React animations using Framer Motion

Learn how to orchestrate animations between parent and child components with variants. Variants allow you to set different states, *almost like keyframes of motion elements*.

By passing a new variant name to the element, it will automatically animate to the configuration of the animation that corresponds.  

Check out the [official docs]([https://www.framer.com/api/motion/types/#transition) for more information on how to customize orchestration between animations.

Animating React Components with Framer Motion

Instructor

Course content (6 lessons)

Instructor