Optional _dragXOptional _dragYUsually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement. Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values. This allows you to manually control how updates from a drag gesture on an element is applied.
Optional aboutOptional accessOptional alignOptional animateValues to animate to, variant label(s), or AnimationControls.
// As values
<motion.div animate={{ opacity: 1 }} />
// As variant
<motion.div animate="visible" variants={variants} />
// Multiple variants
<motion.div animate={["visible", "active"]} variants={variants} />
// AnimationControls
<motion.div animate={animation} />
Optional aria-Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
Optional aria-Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
Optional aria-Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
Optional aria-Defines a string value that labels the current element, which is intended to be converted into Braille.
aria-label.
Optional aria-Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
aria-roledescription.
Optional aria-Optional aria-Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
Optional aria-Defines the total number of columns in a table, grid, or treegrid.
aria-colindex.
Optional aria-Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
Optional aria-Defines a human readable text alternative of aria-colindex.
aria-rowindextext.
Optional aria-Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
Optional aria-Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-owns.
Optional aria-Indicates the element that represents the current item within a container or set of related elements.
Optional aria-Identifies the element (or elements) that describes the object.
aria-labelledby
Optional aria-Defines a string value that describes or annotates the current element.
related aria-describedby.
Optional aria-Identifies the element that provides a detailed, extended description for the object.
aria-describedby.
Optional aria-Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
Optional aria-Indicates what functions can be performed when a dragged object is released on the drop target.
in ARIA 1.1
Optional aria-Identifies the element that provides an error message for the object.
Optional aria-Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
Optional aria-Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
Optional aria-Indicates an element's "grabbed" state in a drag-and-drop operation.
in ARIA 1.1
Optional aria-Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
Optional aria-Indicates whether the element is exposed to an accessibility API.
aria-disabled.
Optional aria-Indicates the entered value does not conform to the format expected by the application.
aria-errormessage.
Optional aria-Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
Optional aria-Defines a string value that labels the current element.
aria-labelledby.
Optional aria-Identifies the element (or elements) that labels the current element.
aria-describedby.
Optional aria-Defines the hierarchical level of an element within a structure.
Optional aria-Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
Optional aria-Indicates whether an element is modal when displayed.
Optional aria-Indicates whether a text box accepts multiple lines of input or only a single line.
Optional aria-Indicates that the user may select more than one item from the current selectable descendants.
Optional aria-Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
Optional aria-Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-controls.
Optional aria-Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
Optional aria-Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-setsize.
Optional aria-Indicates the current "pressed" state of toggle buttons.
Optional aria-Indicates that the element is not editable, but is otherwise operable.
aria-disabled.
Optional aria-Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
aria-atomic.
Optional aria-Indicates that user input is required on the element before a form may be submitted.
Optional aria-Defines a human-readable, author-localized description for the role of an element.
Optional aria-Defines the total number of rows in a table, grid, or treegrid.
aria-rowindex.
Optional aria-Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
Optional aria-Defines a human readable text alternative of aria-rowindex.
aria-colindextext.
Optional aria-Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
Optional aria-Indicates the current "selected" state of various widgets.
Optional aria-Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-posinset.
Optional aria-Indicates if items in a table or grid are sorted in ascending or descending order.
Optional aria-Defines the maximum allowed value for a range widget.
Optional aria-Defines the minimum allowed value for a range widget.
Optional aria-Defines the current value for a range widget.
aria-valuetext.
Optional aria-Defines the human readable text alternative of aria-valuenow for a range widget.
Optional autoOptional autoOptional autoOptional autoOptional childrenOptional classOptional colonOptional colorOptional contentOptional contentOptional contextOptional customCustom data to use to resolve dynamic variants differently for each animating component.
const variants = {
visible: (custom) => ({
opacity: 1,
transition: { delay: custom * 0.2 }
})
}
<motion.div custom={0} animate="visible" variants={variants} />
<motion.div custom={1} animate="visible" variants={variants} />
<motion.div custom={2} animate="visible" variants={variants} />
Optional dangerouslyOptional datatypeOptional defaultOptional defaultOptional dirOptional dragEnable dragging for this element. Set to false by default.
Set true to drag in both directions.
Set "x" or "y" to only drag in a specific direction.
<motion.div drag="x" />
Optional dragApplies constraints on the permitted draggable area.
It can accept an object of optional top, left, right, and bottom values, measured in pixels.
This will define a distance the named edge of the draggable component.
Alternatively, it can accept a ref to another component created with React's useRef hook.
This ref should be passed both to the draggable component's dragConstraints prop, and the ref
of the component you want to use as constraints.
// In pixels
<motion.div
drag="x"
dragConstraints={{ left: 0, right: 300 }}
/>
// As a ref to another component
const MyComponent = () => {
const constraintsRef = useRef(null)
return (
<motion.div ref={constraintsRef}>
<motion.div drag dragConstraints={constraintsRef} />
</motion.div>
)
}
Optional dragUsually, dragging is initiated by pressing down on a component and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we might want to initiate dragging from a different component than the draggable one.
By creating a dragControls using the useDragControls hook, we can pass this into
the draggable component's dragControls prop. It exposes a start method
that can start dragging from pointer events on other components.
const dragControls = useDragControls()
function startDrag(event) {
dragControls.start(event, { snapToCursor: true })
}
return (
<>
<div onPointerDown={startDrag} />
<motion.div drag="x" dragControls={dragControls} />
</>
)
Optional dragIf true, this will lock dragging to the initially-detected direction. Defaults to false.
<motion.div drag dragDirectionLock />
Optional dragThe degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.
Set to 0.5 by default. Can also be set as false to disable movement.
By passing an object of top/right/bottom/left, individual values can be set
per constraint. Any missing values will be set to 0.
<motion.div
drag
dragConstraints={{ left: 0, right: 300 }}
dragElastic={0.2}
/>
Optional dragBy default, if drag is defined on a component then an event listener will be attached
to automatically initiate dragging when a user presses down on it.
By setting dragListener to false, this event listener will not be created.
const dragControls = useDragControls()
function startDrag(event) {
dragControls.start(event, { snapToCursor: true })
}
return (
<>
<div onPointerDown={startDrag} />
<motion.div
drag="x"
dragControls={dragControls}
dragListener={false}
/>
</>
)
Optional dragApply momentum from the pan gesture to the component when dragging
finishes. Set to true by default.
<motion.div
drag
dragConstraints={{ left: 0, right: 300 }}
dragMomentum={false}
/>
Optional dragAllows drag gesture propagation to child components. Set to false by
default.
<motion.div drag="x" dragPropagation />
Optional dragIf true, element will snap back to its origin when dragging ends.
Enabling this is the equivalent of setting all dragConstraints axes to 0
with dragElastic={1}, but when used together dragConstraints can define
a wider draggable area and dragSnapToOrigin will ensure the element
animates back to its origin on release.
Optional dragAllows you to change dragging inertia parameters.
When releasing a draggable Frame, an animation with type inertia starts. The animation is based on your dragging velocity. This property allows you to customize it.
See Inertia for all properties you can use.
<motion.div
drag
dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
/>
Optional draggableOptional exitA target to animate to when this component is removed from the tree.
This component must be the first animatable child of an AnimatePresence to enable this exit animation.
This limitation exists because React doesn't allow components to defer unmounting until after
an animation is complete. Once this limitation is fixed, the AnimatePresence component will be unnecessary.
import { AnimatePresence, motion } from 'framer-motion'
export const MyComponent = ({ isVisible }) => {
return (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
)
}
Optional finishingOptional formOptional globalIf true, the tap gesture will attach its start listener to window.
Note: This is not supported publically.
Optional gutterOptional hiddenOptional idOptional ignoreSet to false to prevent throwing an error when a motion component is used within a LazyMotion set to strict.
Optional inheritSet to false to prevent inheriting variant changes from its parent.
Optional initialProperties, variant label or array of variant labels to start in.
Set to false to initialise with the values in animate (disabling the mount animation)
// As values
<motion.div initial={{ opacity: 1 }} />
// As variant
<motion.div initial="visible" variants={variants} />
// Multiple variants
<motion.div initial={["visible", "active"]} variants={variants} />
// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />
Optional initialOptional inlistOptional inputHints at the type of data that might be entered by the user while editing the element or its contents
Optional interactiveOptional isSpecify that a standard HTML element should behave like a defined custom built-in element
Optional itemIDOptional itemOptional itemOptional itemOptional itemOptional justifyOptional langOptional layoutIf true, this component will automatically animate to its new position when
its layout changes.
<motion.div layout />
This will perform a layout animation using performant transforms. Part of this technique
involved animating an element's scale. This can introduce visual distortions on children,
boxShadow and borderRadius.
To correct distortion on immediate children, add layout to those too.
boxShadow and borderRadius will automatically be corrected if they are already being
animated on this component. Otherwise, set them directly via the initial prop.
If layout is set to "position", the size of the component will change instantly and
only its position will animate. If layout is set to "size", the position of the
component will change instantly but its size will animate.
If layout is set to "size", the position of the component will change instantly and
only its size will animate.
If layout is set to "preserve-aspect", the component will animate size & position if
the aspect ratio remains the same between renders, and just position if the ratio changes.
Optional layoutOptional layoutEnable shared layout transitions between different components with the same layoutId.
When a component with a layoutId is removed from the React tree, and then added elsewhere, it will visually animate from the previous component's bounding box and its latest animated values.
{items.map(item => (
<motion.li layout>
{item.name}
{item.isSelected && <motion.div layoutId="underline" />}
</motion.li>
))}
If the previous component remains in the tree it will crossfade with the new component.
Optional layoutWhether an element should be considered a "layout root", where
all children will be forced to resolve relatively to it.
Currently used for position: sticky elements in Framer.
Optional layoutWhether a projection node should measure its scroll when it or its descendants update their layout.
Optional lazyOptional nonceOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onIf dragConstraints is set to a React ref, this callback will call with the measured drag constraints.
If dragConstraints is set to a React ref, this callback will call with the measured drag constraints.
Optional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional onOptional prefixOptional prefixOptional propertyOptional radioOptional relOptional resourceOptional resultsOptional revOptional roleOptional securityOptional slotOptional spellOptional styleThe React DOM style prop, enhanced with support for MotionValues and separate transform values.
export const MyComponent = () => {
const x = useMotionValue(0)
return <motion.div style={{ x, opacity: 1, scale: 0.5 }} />
}
Optional suppressOptional suppressOptional tabOptional titleOptional transitionDefault transition. If no transition is defined in animate, it will use the transition defined here.
const spring = {
type: "spring",
damping: 10,
stiffness: 100
}
<motion.div transition={spring} animate={{ scale: 1.2 }} />
Optional translateOptional twSpecify styles using Tailwind CSS classes. This feature is currently experimental.
If style prop is also specified, styles generated with tw prop will be overridden.
Example:
tw='w-full h-full bg-blue-200'tw='text-9xl'tw='text-[80px]'Optional typeofOptional unselectableOptional variantsVariants allow you to define animation states and organise them by name. They allow
you to control animations throughout a component tree by switching a single animate prop.
Using transition options like delayChildren and staggerChildren, you can orchestrate
when children animations play relative to their parent.
After passing variants to one or more motion component's variants prop, these variants
can be used in place of values on the animate, initial, whileFocus, whileTap and whileHover props.
const variants = {
active: {
backgroundColor: "#f00"
},
inactive: {
backgroundColor: "#fff",
transition: { duration: 2 }
}
}
<motion.div variants={variants} animate="active" />
Optional viewportOptional vocabOptional whileProperties or variant label to animate to while the drag gesture is recognised.
<motion.div whileDrag={{ scale: 1.2 }} />
Optional whileProperties or variant label to animate to while the focus gesture is recognised.
<motion.input whileFocus={{ scale: 1.2 }} />
Optional whileProperties or variant label to animate to while the hover gesture is recognised.
<motion.div whileHover={{ scale: 1.2 }} />
Optional whileOptional whileProperties or variant label to animate to while the component is pressed.
<motion.div whileTap={{ scale: 0.8 }} />
Optional wrapOptional onCallback when animation defined in animate is complete.
The provided callback will be called with the triggering animation definition. If this is a variant, it'll be the variant name, and if a target object then it'll be the target object.
This way, it's possible to figure out which animation has completed.
function onComplete() {
console.log("Animation completed")
}
<motion.div
animate={{ x: 100 }}
onAnimationComplete={definition => {
console.log('Completed animating', definition)
}}
/>
Optional onCallback when animation defined in animate begins.
The provided callback will be called with the triggering animation definition. If this is a variant, it'll be the variant name, and if a target object then it'll be the target object.
This way, it's possible to figure out which animation has started.
function onStart() {
console.log("Animation started")
}
<motion.div animate={{ x: 100 }} onAnimationStart={onStart} />
Optional onOptional onOptional onCallback function that fires when the component is dragged.
<motion.div
drag
onDrag={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
Optional onCallback function that fires when dragging ends.
<motion.div
drag
onDragEnd={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
Optional onCallback function that fires when dragging starts.
<motion.div
drag
onDragStart={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
Optional onOptional onCallback function that fires when pointer stops hovering over the component.
<motion.div onHoverEnd={() => console.log("Hover ends")} />
Optional onCallback function that fires when pointer starts hovering over the component.
<motion.div onHoverStart={() => console.log('Hover starts')} />
Optional onOptional onOptional onOptional onCallback function that fires when the pan gesture is recognised on this element.
Note: For pan gestures to work correctly with touch input, the element needs touch scrolling to be disabled on either x/y or both axis with the touch-action CSS rule.
function onPan(event, info) {
console.log(info.point.x, info.point.y)
}
<motion.div onPan={onPan} />
The originating pointer event.
A PanInfo object containing x and y values for:
point: Relative to the device or page.delta: Distance moved since the last event.offset: Offset from the original pan event.velocity: Current velocity of the pointer.Optional onCallback function that fires when the pan gesture ends on this element.
function onPanEnd(event, info) {
console.log(info.point.x, info.point.y)
}
<motion.div onPanEnd={onPanEnd} />
The originating pointer event.
A PanInfo object containing x/y values for:
point: Relative to the device or page.delta: Distance moved since the last event.offset: Offset from the original pan event.velocity: Current velocity of the pointer.Optional onCallback function that fires when we begin detecting a pan gesture. This
is analogous to onMouseStart or onTouchStart.
function onPanSessionStart(event, info) {
console.log(info.point.x, info.point.y)
}
<motion.div onPanSessionStart={onPanSessionStart} />
The originating pointer event.
An EventInfo object containing x/y values for:
point: Relative to the device or page.Optional onCallback function that fires when the pan gesture begins on this element.
function onPanStart(event, info) {
console.log(info.point.x, info.point.y)
}
<motion.div onPanStart={onPanStart} />
The originating pointer event.
A PanInfo object containing x/y values for:
point: Relative to the device or page.delta: Distance moved since the last event.offset: Offset from the original pan event.velocity: Current velocity of the pointer.Optional onCallback when the tap gesture successfully ends on this element.
function onTap(event, info) {
console.log(info.point.x, info.point.y)
}
<motion.div onTap={onTap} />
The originating pointer event.
An TapInfo object containing x and y values for the point relative to the device or page.
Optional onCallback when the tap gesture ends outside this element.
function onTapCancel(event, info) {
console.log(info.point.x, info.point.y)
}
<motion.div onTapCancel={onTapCancel} />
The originating pointer event.
An TapInfo object containing x and y values for the point relative to the device or page.
Optional onCallback when the tap gesture starts on this element.
function onTapStart(event, info) {
console.log(info.point.x, info.point.y)
}
<motion.div onTapStart={onTapStart} />
The originating pointer event.
An TapInfo object containing x and y values for the point relative to the device or page.
Optional onCallback with latest motion values, fired max once per frame.
function onUpdate(latest) {
console.log(latest.x, latest.opacity)
}
<motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />
Optional transformBy default, Framer Motion generates a transform property with a sensible transform order. transformTemplate
can be used to create a different order, or to append/preprend the automatically generated transform property.
<motion.div
style={{ x: 0, rotate: 180 }}
transformTemplate={
({ x, rotate }) => `rotate(${rotate}deg) translateX(${x}px)`
}
/>
The latest animated transform props.
The transform string as automatically generated by Framer Motion
Generated using TypeDoc
Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement. Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values. This allows you to manually control how updates from a drag gesture on an element is applied.