Search

API Overview

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

Leave a Reply

plugins premium WordPress
Scroll to Top