Animation » API Overview

API Overview

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

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