API Overview

All the Framer and Framer Motion properties, events, and utilities.

Animation properties
- Transition options
- Orchestration options
Drag properties
- Drag transition options
Events
Special components
MotionValues
- The MotionValue API
Utilities
- AnimationControls object

Here’s an overview of all the API properties, user events, extra components, and utility functions,… with links to where they’re explained or used in the book.

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

Animation properties

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

Framer API	Motion API
`animate`	`animate`	The Animate Property
`transition`	`transition`	The Transition Property, Customizing Layout Animations
`transitionEnd`	`transitionEnd`
`initial`	`initial`	‘While’ Animations and Initial
`variants`	`variants`	Variants, 26. Variants, 27. Variants: Staggered, 28. Variants: Nesting
`exit`	`exit`	Animate Presence, 33. Modal
`custom`	`custom`	The useAnimation() Hook > Dynamic start Variants > Dynamic variants
`layout`	`layout`	Automatic Layout Animations, Customizing Layout Animations, 30. Stack: Animation, 34. Shuffle
	`layoutId`	Layout ID

The components that are based on Framer’s <Frame>, 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.

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

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`	`delayChildren`	✅	✅	Animation orchestration
`staggerChildren`	`staggerChildren`	✅	✅	Animation orchestration
`staggerDirection`	`staggerDirection`	✅	✅	Animation orchestration
`when`	`when`	✅	✅	Animation orchestration

Drag properties

Change the behavior of a draggable element with these properties.

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

Drag transition options

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

Framer API	Motion API
`power`	`power`	Inertia Animations > Momentum
`timeConstant`	`timeConstant`	Inertia Animations > Momentum
`modifyTarget()`	`modifyTarget()`	Modify Target
`bounceStiffness`	`bounceStiffness`	Inertia Animations > Snap to constraints
`bounceDamping`	`bounceDamping`	Inertia Animations > Snap to constraints
`restDelta`	`restDelta`	Inertia Animations > Snap to constraints
`restSpeed`	`restSpeed`	Inertia Animations > Snap to constraints
`min`	`min`	Min and Max
`max`	`max`	Min and Max

Events

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

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

Framer API	Motion API
`whileHover`	`whileHover`	‘While’ Animations and Initial, 6. Event: WhileHover
`onHoverStart()`	`onHoverStart()`	The useState() Hook, The useCycle() Hook, The useAnimation() Hook, 23. Color: Layered, Animating SVG Path Changes
`onHoverEnd()`	`onHoverEnd()`	The useState() Hook, The useAnimation() Hook, 23. Color: Layered, Animating SVG Path Changes
`whileTap`	`whileTap`	‘While’ Animations and Initial, 5. Event: WhileTap
`onTapStart()`	`onTapStart()`	The useState() Hook, The useCycle() Hook
`onTap()`	`onTap()`	🔍 Search for pages containing ‘onTap()’
`onTapCancel()`	`onTapCancel()`
`onPanStart()`	`onPanStart()`
`onPan()`	`onPan()`	The useState() Hook
`onPanEnd()`	`onPanEnd()`
`whileDrag`	`whileDrag`	‘While’ Animations and Initial
`onDragStart()`	`onDragStart()`	Drag Events, The useState() Hook, The useAnimation() Hook
`onDrag()`	`onDrag()`	Drag Events
`onDragEnd()`	`onDragEnd()`	Drag Events, The useState() Hook, The useAnimation() Hook, Snap to Corner Example, 35. Swipe to Delete, 36. Stack 3D
`onDirectionLock()`	`onDirectionLock()`	Drag Events
	`whileFocus`	‘While’ Animations and Initial

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

Framer API	Motion API
`onAnimationStart()`	`onAnimationStart()`
`onUpdate()`	`onUpdate()`
`onAnimationComplete()`	`onAnimationComplete()`

Special components

Sometimes you need to wrap everything in a parent component that’ll know when to trigger an unmount animation: <AnimatePresence>, or start layout animations: <AnimateSharedLayout>.

Framer API	Motion API
`<AnimatePresence>`	`<AnimatePresence>`	Animate Presence
↳ `initial`	↳ `initial`	Canceling the initial mount animation
↳ `exitBeforeEnter`	↳ `exitBeforeEnter`	Exit before enter
↳ `onExitComplete()`	↳ `onExitComplete()`	onExitComplete()
↳ `custom`	↳ `custom`
	`<AnimateSharedLayout>`	Shared Layout Animations, Layout ID
	↳ `type`	Adding crossfade

MotionValues

Hooks and other functions to create, transform, or animate MotionValues.

Framer API	Motion API
`useMotionValue()`	`useMotionValue()`	Animating an SVG Path’s Stroke, 12. Drag: Transform, 13. Drag: 3D, 18. Scroll: Progress, 20. Scroll: Refresh, 22. Color: Interpolation, 24. Cursor, 32. SVG, 35. Swipe to Delete, 36. Stack 3D, Snap to Corner Example
`motionValue()`	`motionValue()`	Animating Scroll Position, 20. Scroll: Refresh, 22. Color: Interpolation
`useSpring()`	`useSpring()`	Animating an SVG Path’s Stroke
`useTransform()`	`useTransform()`	Scroll-based Animations, 12. Drag: Transform, 13. Drag: 3D, 18. Scroll: Progress, 20. Scroll: Refresh, 22. Color: Interpolation
	`useMotionTemplate()`
`useViewportScroll()`	`useViewportScroll()`	Scroll-based Animations, Animating an SVG Path’s Stroke
	`useElementScroll()`	Scroll-based Animations
`animate()`	`animate()`	Animating Scroll Position

The MotionValue API

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

Framer API	Motion API
`get()`	`get()`	Animating Scroll Position, Snap to Corner Example, Scroll-based Animations, 18. Scroll: Progress, 35. Swipe to Delete
`getVelocity()`	`getVelocity()`
`set()`	`set()`	Animating Scroll Position, Animating an SVG Path’s Stroke
`onChange()`	`onChange()`	Animating Scroll Position, Scroll-based Animations, Animating an SVG Path’s Stroke
`isAnimating()`	`isAnimating()`
`stop()`	`stop()`
`destroy()`	`destroy()`

Utilities

These are the remaining Framer 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()`	`transform()`	24. Cursor
`useCycle()`	`useCycle()`	The useCycle() Hook, Keyframes, Passing Down Props, Sharing State, Recreating Magic Motion, 7. Event: Tap,30. Stack: Animation, 34. Shuffle
`useAnimation()`	`useAnimation()`	The useAnimation() Hook, Keyframes, Snap to Corner Example, iOS Segmented Control > 4. Selection Indicator, 8. Event: Sequence, 35. Swipe to Delete
	`usePresence()`
	`useIsPresent()`
	`useReducedMotion()`
`useIsInCurrentNavigationTarget()`

AnimationControls object

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

Framer API	Motion API
`start()`	`start()`	The useAnimation() Hook, Keyframes, Animating an SVG Path’s Stroke, Snap to Corner Example, iOS Segmented Control > 4. Selection Indicator, 8. Event: Sequence, 35. Swipe to Delete
`set()`	`set()`
`stop()`	`stop()`	The useAnimation() Hook