Animation » 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 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 ‘While’ Animations and Initial
variants Variants, 27. Variants: Animation propagation, 28. Variants: Staggered animation, 29. Cycling parent and child variants
exit Animate Presence, 31. Animate Presence, 32. Animate Presence: Stack 3D
custom The useAnimation() Hook > Dynamic start
Variants > Dynamic variants
layout Automatic Layout Animations, Customizing Layout Animations, 33. Layout animation, 35. Swipe to delete
layoutId Layout ID, 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 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.

Motion API Tween Spring
delayChildren Animation orchestration
staggerChildren Animation orchestration
staggerDirection Animation orchestration
when Animation orchestration
custom Variants > Dynamic variants
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
useDragControls() 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’ animation helpers.

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

Motion API
whileHover ‘While’ Animations and Initial, 6. While hover, 8. While drag, 27. Variants: Animation propagation
onHoverStart() The useState() Hook, The useCycle() Hook, The useAnimation() Hook, 25. Colors: Switching between states, Animating SVG Path Changes
onHoverEnd() The useState() Hook, The useAnimation() Hook, 25. Colors: Switching between states, Animating SVG Path Changes
whileTap ‘While’ Animations and Initial, 7. While tap, 8. While drag
onTapStart() The useState() Hook, The useCycle() Hook
onTap() 🔍 Search for pages containing ‘onTap()’
onTapCancel()
onPanStart()
onPan() The useState() Hook
onPanEnd()
whileDrag ‘While’ Animations and Initial, 8. While drag
onDragStart() Drag Events, The useState() Hook, The useAnimation() Hook
onDrag() Drag Events
onDragEnd() Drag Events, The useState() Hook, The useAnimation() Hook, Snap to Corner Example, 32. Animate Presence: Stack 3D, 35. Swipe to delete
onDirectionLock() Drag Events
whileFocus ‘While’ Animations and Initial
whileInView See 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
  ↳ fallback

Special components

Sometimes you need to wrap everything in a parent component that’ll know when to trigger an unmount animation: <AnimatePresence>, or you might want to group a set of layout animations in a <LayoutGroup>.

Framer API Motion API
<AnimatePresence> Animate Presence
  ↳ initial Canceling the initial mount animation
  ↳ exitBeforeEnter Exit before enter
  ↳ onExitComplete() onExitComplete()
  ↳ custom
  ↳ usePresence()
  ↳ useIsPresent()
<LayoutGroup> Layout Group
<AutomaticLayoutIds>
<LazyMotion>
  ↳ features
  ↳ strict
<MotionConfig>
  ↳ transition
  ↳ reducedMotion
<Reorder.Group>
  ↳ as
  ↳ axis
  ↳ values
  ↳ onReorder()
<Reorder.Item>
  ↳ as
  ↳ value

MotionValues

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

Motion API
useMotionValue() Animating an SVG Path’s Stroke, 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() Animating Scroll Position, 15. Scroll: Progress, 16. Scroll: Refresh, 24. Colors: Interpolation
useSpring() Animating an SVG Path’s Stroke
useTime()
useTransform() Scroll-based Animations, 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()
useViewportScroll() Scroll-based Animations, Animating an SVG Path’s Stroke
useElementScroll() Scroll-based Animations
useVelocity()
animate() Animating Scroll Position

There are special MotionValues 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 Animating an SVG Path’s Stroke
pathSpacing Animating an SVG Path’s Stroke
pathOffset Animating an SVG Path’s Stroke

The MotionValue API

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

Motion API
get() Animating Scroll Position, Snap to Corner Example, Scroll-based Animations, 35. Swipe to delete
getVelocity()
set() Animating Scroll Position, Animating an SVG Path’s Stroke
onChange() Animating Scroll Position, Scroll-based Animations, Animating an SVG Path’s Stroke
isAnimating()
stop()
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() The useCycle() Hook, Keyframes, Passing Down Props, Sharing State, Recreating Magic Motion, 9. Cycling through states, 29. Cycling parent and child variants, 33. Layout animation
useAnimation() The useAnimation() Hook, Keyframes, Snap to Corner Example, iOS Segmented Control > 4. Selection Indicator, 10. Animation sequence, 35. Swipe to delete
useReducedMotion()
useAnimationFrame()
addPropertyControls() Property Controls
RenderTarget.current() 33. Layout animation, C05 – Initial, C06 – Including Transition settings, D03 – Orchestration 1, D04 – Orchestration 2, D05 – Dynamic variants, D06 – Custom property
RenderTarget.hasRestrictions()
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.

Motion API
start() The useAnimation() Hook, Keyframes, Animating an SVG Path’s Stroke, Snap to Corner Example, iOS Segmented Control > 4. Selection Indicator, 10. Animation sequence, 35. Swipe to delete
set()
stop() The useAnimation() Hook

Leave a Reply