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

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.


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

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.



Leave a Reply