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 in the book. 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.

Framer API

Need to know which properties a <Page> or <Scroll> has? The old legacy docs were online at https://www.framer.com/legacy/docs but were removed with the launch of Framer Sites. I found copies on the Wayback Machine for <Frame> and <Page>, but not for <Scroll> and <Stack>. Hopefully, we’ll see new docs appear with the current APIs of these Framer Library components.

Animation properties

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

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

Other Framer components like <Scroll>, <Page> , and <Stack> will also have these properties.

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.

Motion API	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`	✅	✅	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.

Motion API	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.

Motion API
`drag`	Dragging Axis and Direction Locking
`dragDirectionLock`	Axis and Direction Locking
`dragConstraints`	Drag Constraints
`dragElastic`	Drag Elastic
`dragMomentum`	Drag Momentum
`dragTransition`	Inertia Animations
`dragPropagation`
`dragControls`	Drag Controls

Drag transition options

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

Motion API
`power`	Inertia Animations > Momentum
`timeConstant`	Inertia Animations > Momentum
`modifyTarget()`	Modify Target
`bounceStiffness`	Inertia Animations > Snap to constraints
`bounceDamping`	Inertia Animations > Snap to constraints
`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 frame or motion element will react to. Plus also: the ‘while’ gesture animations.

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

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

Frames and motion elements have a few more events that are triggered by animations:

Motion API
`onAnimationStart()`
`onUpdate()`
`onAnimationComplete()`
`onLayoutAnimationStart()`
`onLayoutAnimationComplete()`

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

Motion API
`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>.

Framer API	Motion API
	`<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
`<AutomaticLayoutIds>`
	`<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.

Motion API
`useMotionValue()`	Motion Values, Chaining and Transforming Motion Values, Scroll Layers for Prototyping, Animating Motion Values, Resetting a Motion Value, Springy Motion Values, Line Drawing, 13. Drag: Transform, 14. Drag: 3D transform, 15. Scroll: Progress, 16. Scroll: Refresh, 20. SVG path length, 24. Colors: Interpolation, 26. Tracking the cursor, 32. Animate Presence: Stack 3D, 35. Swipe to delete, Snap to Corner Example
`motionValue()`	Motion Values, Chaining and Transforming Motion Values, Scroll Layers for Prototyping, Animating Motion Values, Resetting a Motion Value, Springy Motion Values, 15. Scroll: Progress, 16. Scroll: Refresh, 24. Colors: Interpolation
`useSpring()`	Springy Motion Values, Animating an SVG Path’s Stroke
`useTime()`
`useTransform()`	Chaining and Transforming Motion Values, Motion Values, Scroll-Linked Animations, Scroll Layers for Prototyping, Animating Motion Values, Resetting a Motion Value, Springy Motion Values, 13. Drag: Transform, 14. Drag: 3D transform, 15. Scroll: Progress, 16. Scroll: Refresh, 20. SVG path length, 24. Colors: Interpolation, 26. Tracking the cursor, 32. Animate Presence: Stack 3D
`useMotionTemplate()`	Element position
`useScroll()`	Scroll-Linked Animations, Line Drawing
`useVelocity()`
`useWillChange()`
`useMotionValueEvent()`	Motion Values, Scroll-Linked Animations, Scroll Layers for Prototyping

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.

Motion API
`pathLength`	Line Drawing > Extra convenience properties
`pathSpacing`	Line Drawing > Extra convenience properties
`pathOffset`	Line Drawing > Extra convenience properties

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.

Motion API
`get()`	Motion Values, Scroll-Linked Animations, Animating Motion Values, Snap to Corner Example, 35. Swipe to delete
`getVelocity()`
`set()`	Motion Values, Chaining and Transforming Motion Values, Scroll Layers for Prototyping, Animating Motion Values, Resetting a Motion Value, Line Drawing
`jump()`
`isAnimating()`
`stop()`
`on()`	Motion Values
`destroy()`

Utilities

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

Framer API	Motion API
	`transform()`	26. Tracking the cursor
	`useCycle()`	Cycling Through States, Keyframes, Passing Down Props, Sharing State, Recreating Magic Motion, 9. Cycling through states, 29. Cycling parent and child variants, 33. Layout animation
	`useAnimationControls()`	The useAnimationControls() Hook, Keyframes
	`useReducedMotion()`
	`useAnimationFrame()`
	`useAnimate()`	The useAnimate() Hook, Animating an SVG Path’s Stroke, Animation Types: Tween curves example project and Spring example project, 10. Animation sequence, 35. Swipe to delete
	`animate()`	Animating Motion Values, Snap to Corner Example, 35. Swipe to delete
	↳ `stagger()`	Stagger
	`useDragControls()`	Drag Controls
	`useInView()`
`addPropertyControls()`		Property Controls
`RenderTarget.current()`		33. Layout animation, C05 – Initial, D03 – Orchestration 1, D04 – Orchestration 2, D05 – Dynamic variants, D06 – Custom property
`RenderTarget.hasRestrictions()`
`useIsInCurrentNavigationTarget()`

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.

Motion API
`start()`	The useAnimationControls() Hook, Keyframes
`set()`
`stop()`	The useAnimationControls() Hook