Optional _dragXUsually, 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 _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 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 childrenOptional 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 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 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 globalIf true, the tap gesture will attach its start listener to window.
Note: This is not supported publically.
Optional 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 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 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 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 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 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 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 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
Props for
motioncomponents.