Animate everything with Framer Motion.

How to use Motion elements. Free — Check out 32 example projects. Free — How to use the animate, transition, and initial properties. Free — Add hover, tap, drag, and focus animations with one line of code. — Define predefined visual states with variants, use them to make child elements animate automatically, and orchestrate those child animations. — Use keyframes to create animation sequences and adjust their timing and animation curves. — Use predefined easing curves, custom Bézier curves, and default or duration-based spring curves. — Animate elements just before they’re removed from the DOM tree, make something happen just after such an animation, and animate elements in and out by changing their key. — Cycle through a set of predefined animation states, animate to a specific state instead of the next one, or cycle through a set of ‘variants’. — Layout Animations: animate elements by simply changing their dimensions or position, solve possible problems with child elements or CSS classes, customize these animations or synchronize the layout animations of different elements. — Shared Layout Animations: animate from one element to another or animate to a newly added element. — How to track animations by injecting Motion values, how to display these Motion values, transform them or use them to track the scroll position of a webpage, track the scroll position of a scrollable element, or track where an element is in the viewport. — Animate these Motion values. — Create springy Motion values. — Start animations manually with the useAnimate() hook, animate sub-elements, start, stop, pause them, and create staggered animations and animation sequences. — And you can still use the useAnimationControls() hook to start animations manually. — Animate SVG paths, line draw SVG paths and other elements, and animate SVG gradients. — Make any HTML element draggable, limit its axis or lock its direction, define how far you can drag it and how it should act beyond these constraints, decide if you can throw it, tweak its ‘inertia’ animations, decide where it should end up after these animations, track drag actions with different events, control a draggable element with another element, or make a draggable element snap to a grid or a corner. — New Create a list of items you can reorder by dragging. Make a horizontal list, add and remove items, or make only part of an item draggable. — Combine React Router and Framer Motion to create animations between webpages. — Check the different properties you can animate. And an overview of all the API’s properties, drag properties, events, special components, hooks for Motion values, and other utilities. Free