The Mighty Framer Motion Guide

Dragging

Axis and Direction Locking

Drag Constraints

Drag Elastic

Drag Momentum

Inertia Animations

Modify Target

Min and Max

Snap to Grid Example

Snap to Corner Example

Drag Events

Drag Controls

Reorder

Routing

Animatable Properties

API Overview

Homepage

API Overview

All the Framer Motion properties, events, and utilities.

Here’s an overview of the Framer Motion API properties, user events, extra components, and utility functions,… with links to where they’re explained or used on this website. The Framer Motion 3D integration with React Three Fiber is not yet included.

For a demo of the visual and layout properties that you can actually animate, check Animatable Properties.

Animation properties

Every Motion element has this set of properties that make animations happen.

`animate`	The Animate Property
`transition`	The Transition Property, Customizing Layout Animations
`transitionEnd`
`initial`	The Initial Property
`variants`	Variants, 24. Variants: Animation propagation, 25. Variants: Staggered animation, 26. Cycling parent and child variants, 29. Animate Presence: Stack 3D
`exit`	Exit Animations, 28. Animate Presence, 29. Animate Presence: Stack 3D
`custom`	The useAnimationControls() Hook > Dynamic start Variants > The custom property
`layout`	Layout Animations, Customizing Layout Animations, 30. Layout animation, 32. Swipe to delete
`layoutId`	Shared Layout Animations, 31. Swapping elements
`layoutDependency`
`layoutScroll`

Transition options

Some transition settings you can only use with tween curves, others only with a spring, but adding repetitions or a delay is possible with both.

	Tween	Spring
`type: "tween"`	✅	🚫	Animation Types > Tween
`type: "spring"`	🚫	✅	Animation Types > Spring
`repeat`	✅	✅	The Transition Property
`repeatType`	✅	✅	The Transition Property
`delay`	✅	✅	The Transition Property
`repeatDelay`	✅	✅	The Transition Property
`duration`	✅	🚫	Animation Types > Tween
`ease`	✅	🚫	Animation Types > Tween
`times`	✅	🚫	Keyframes > Adjusting timing
`from`	✅	🚫
`duration`	🚫	✅	Animation Types > Duration-based spring
`bounce`	🚫	✅	Animation Types > Duration-based spring
`stiffness`	🚫	✅	Animation Types > Default spring
`damping`	🚫	✅	Animation Types > Default spring
`mass`	🚫	✅	Animation Types > Default spring
`velocity`	🚫	✅	Animation Types > Default spring
`restDelta`	🚫	✅	Animation Types > Default spring
`restSpeed`	🚫	✅	Animation Types > Default spring
`layout`	✅	✅	Customizing Layout Animations

Orchestration options

You can orchestrate child animations by adding these settings to their parent’s transition. Important: they’ll only work with variants.

	Tween	Spring
`delayChildren`	✅	✅	Animation orchestration
`staggerChildren`	✅	✅	Animation orchestration
`staggerDirection`	✅	✅	Animation orchestration
`when`	✅	✅	Animation orchestration
`custom`	✅	✅	Variants > The custom property
`inherit`	✅	✅

Drag properties

Change the behavior of a draggable element with these properties.

`drag`	Dragging, Axis and Direction Locking, 11. Drag: Constraints, 12. Drag: Direction locking, 13. Drag: Transform, 14. Drag: 3D transform, 15. Scroll: Progress, 16. Scroll: Refresh, 21. Colors: Interpolation, 29. Animate Presence: Stack 3D, 32. Swipe to delete
`dragDirectionLock`	Axis and Direction Locking, 12. Drag: Direction locking, 32. Swipe to delete
`dragConstraints`	Drag Constraints, 11. Drag: Constraints, 12. Drag: Direction locking, 13. Drag: Transform, 14. Drag: 3D transform, 15. Scroll: Progress, 16. Scroll: Refresh, 21. Colors: Interpolation, 29. Animate Presence: Stack 3D
`dragElastic`	Drag Elastic, 11. Drag: Constraints, 12. Drag: Direction locking, 14. Drag: 3D transform
`dragMomentum`	Drag Momentum
`dragTransition`	Inertia Animations, 11. Drag: Constraints, 12. Drag: Direction locking, 13. Drag: Transform
`dragPropagation`
`dragControls`	Drag Controls
`useDragControls()`	Drag Controls

Drag transition options

Releasing a draggable element starts an inertia animation, which you can tweak with these dragTransition options.

`power`	Inertia Animations > Momentum
`timeConstant`	Inertia Animations > Momentum
`modifyTarget()`	Modify Target
`bounceStiffness`	Inertia Animations > Snap to constraints, 11. Drag: Constraints, 12. Drag: Direction locking, 13. Drag: Transform
`bounceDamping`	Inertia Animations > Snap to constraints, 11. Drag: Constraints, 12. Drag: Direction locking, 13. Drag: Transform
`restDelta`	Inertia Animations > Snap to constraints
`restSpeed`	Inertia Animations > Snap to constraints
`min`	Min and Max
`max`	Min and Max

Events

An overview of the user events a motion element will react to. Plus also: the ‘while’ animation helpers.

You can also use common browser events. React will turn them into synthetic events (which still contain a reference to the original event).

`whileHover`	Gesture Animations, 6. While hover, 8. While drag, 27. Variants: Animation propagation
`onHoverStart()`	Cycling Through States, The useAnimationControls() Hook, 22. Colors: Switching between states, Animating SVG Path Changes
`onHoverEnd()`	Cycling Through States, The useAnimationControls() Hook, 22. Colors: Switching between states, Animating SVG Path Changes
`whileTap`	Gesture Animations, 7. While tap, 8. While drag
`onTapStart()`	The Animate Property, Cycling Through States
`onTap()`	🔍 Search for pages containing ‘onTap’
`onTapCancel()`
`onPanStart()`
`onPan()`	The Animate Property
`onPanEnd()`
`whileDrag`	Gesture Animations, 8. While drag
`onDragStart()`	Drag Events, The Animate Property, The useAnimationControls() Hook
`onDrag()`	Drag Events
`onDragEnd()`	Drag Events, The Animate Property, The useAnimationControls() Hook, Snap to Corner Example, 29. Animate Presence: Stack 3D, 32. Swipe to delete
`onDirectionLock()`	Drag Events
`whileFocus`	Gesture Animations
`whileInView`	See the table below for configuration options with `viewport`.
`onViewportEnter()`
`onViewportLeave()`

Motion elements have a few more events that are triggered by animations:

onAnimationStart()

onUpdate()

onAnimationComplete()

onLayoutAnimationStart()

onLayoutAnimationComplete()

You can set configuration options for the whileInView animation helper on the viewport property.

viewport

↳ once

↳ root

↳ margin

↳ amount

Special components

Sometimes you need to wrap everything in a parent component that enables unmount animations: <AnimatePresence>, or you might want to synchronise a set of layout animations in a <LayoutGroup>.

`<AnimatePresence>`	Exit Animations, Routing
↳ `initial`	Canceling the initial mount animation, Routing
↳ `mode`	Wait a bit
↳ `onExitComplete()`	onExitComplete()
↳ `custom`	`<AnimatePresence>`’s `custom` property
↳ `usePresence()`
↳ `useIsPresent()`	Routing
`<LayoutGroup>`	Layout Group
`<LazyMotion>`
↳ `features`
↳ `strict`
`<MotionConfig>`
↳ `transition`
↳ `reducedMotion`
`<Reorder.Group>`	Reorder.Group
↳ `as`	`<ul>` or `<ol>`
↳ `axis`	Reorder.Group, A horizontal list
↳ `values`	Reorder.Group
↳ `onReorder()`	Reorder.Group
`<Reorder.Item>`	Reorder.Item
↳ `as`
↳ `value`	Reorder.Item

Motion values

Hooks and other functions to create, transform, or animate Motion values.

`useMotionValue()`	Motion Values, Chaining and Transforming Motion Values, Animating Motion Values, Springy Motion Values, Line Drawing, 13. Drag: Transform, 14. Drag: 3D transform, 15. Scroll: Progress, 16. Scroll: Refresh, 17. SVG path length, 21. Colors: Interpolation, 23. Tracking the cursor, 29. Animate Presence: Stack 3D, 32. Swipe to delete, Snap to Corner Example
`useSpring()`	Springy Motion Values, Line Drawing
`useTime()`
`useTransform()`	Chaining and Transforming Motion Values, Motion Values, Scroll-Linked Animations, Animating Motion Values, Springy Motion Values, 13. Drag: Transform, 14. Drag: 3D transform, 15. Scroll: Progress, 16. Scroll: Refresh, 17. SVG path length, 21. Colors: Interpolation, 23. Tracking the cursor, 29. Animate Presence: Stack 3D
`useMotionTemplate()`	Element position
`useScroll()`	Scroll-Linked Animations, Line Drawing
`useVelocity()`
`useWillChange()`
`useMotionValueEvent()`	Motion Values, Scroll-Linked Animations

There are special Motion values that you can use to change the path of an SVG motion.circle, motion.ellipse, motion.line,motion.path, motion.polygon, motion.polyline, or motion.rect.

`pathLength`	Line Drawing
`pathSpacing`	Line Drawing
`pathOffset`	Line Drawing

The Motion value API

Every Motion value has these methods. Use them to get its current value, change that value, or subscribe to value changes.

`get()`	Motion Values, Scroll-Linked Animations, Animating Motion Values, Snap to Corner Example, 32. Swipe to delete
`getVelocity()`
`set()`	Motion Values, Chaining and Transforming Motion Values, Animating Motion Values, Line Drawing
`jump()`
`isAnimating()`
`stop()`
`on()`	Motion Values
`destroy()`

Utilities

These are the remaining Framer Motion utilities. The transform() function is a version of the useTransform() hook (see above) that works with common numeric values.

`transform()`	23. Tracking the cursor
`useCycle()`	Cycling Through States, Recreating Magic Motion, 9. Cycling through states, 26. Cycling parent and child variants, 30. Layout animation
`useAnimationControls()`	The useAnimationControls() Hook
`useReducedMotion()`
`useAnimationFrame()`
`useAnimate()`	The useAnimate() Hook, Line Drawing, 10. Animation sequence, 32. Swipe to delete
`animate()`	Animating Motion Values, Snap to Corner Example, 32. Swipe to delete
↳ `stagger()`	Stagger
`useDragControls()`	Drag Controls
`useInView()`

AnimationControls object

The useAnimationControls()hook creates an AnimationControls object. These methods let you start and stop animations or instantly change the animated properties to a different value.

Note: The useAnimationControls() hook is being phased out in favor of the recently added (Framer Motion 10.5) useAnimate() hook.

`start()`	The useAnimationControls() Hook
`set()`
`stop()`	The useAnimationControls() Hook

API Overview

Animation properties

Transition options

Orchestration options

Drag properties

Drag transition options

Events

Special components

Motion values

The Motion value API

Utilities

AnimationControls object

Leave a Reply Cancel reply