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.
Values to animate to, variant label(s), or AnimationControls.
Custom data to use to resolve dynamic variants differently for each animating component.
Enable 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.
Applies 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.
Usually, 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.
If true, this will lock dragging to the initially-detected direction. Defaults to false.
The degree of movement allowed outside constraints. 0 = no movement, 1 =
full movement. Set to 0.5 by default.
By 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.
Apply momentum from the pan gesture to the component when dragging
finishes. Set to true by default.
Allows drag gesture propagation to child components. Set to false by
default.
Allows 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.
A 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.
Properties, variant label or array of variant labels to start in.
Set to false to initialise with the values in animate (disabling the mount animation)
If 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.
Enable shared layout transitions between components for children of AnimateSharedLayout.
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.
<AnimateSharedLayout>
{items.map(item => (
<motion.li layout>
{item.name}
{item.isSelected && <motion.div layoutId="underline" />}
</motion.li>
))}
</AnimateSharedLayout>If the previous component remains in the tree it will either get hidden immediately or,
if type="crossfade" is set on AnimateSharedLayout, it will crossfade to the new component.
If dragConstraints is set to a React ref, this callback will call with the measured drag constraints.
Default transition. If no transition is defined in animate, it will use the transition defined here.
Variants 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.
Properties or variant label to animate to while the hover gesture is recognised.
Properties or variant label to animate to while the component is pressed.
Callback when animation defined in animate is complete.
Callback when animation defined in animate begins.
Callback function that fires a drag direction is determined.
Callback function that fires when the component is dragged.
Callback function that fires when dragging ends.
Callback function that fires when dragging starts.
Callback function that fires when drag momentum/bounce transition finishes.
Callback function that fires when pointer stops hovering over the component.
Callback function that fires when pointer starts hovering over the component.
A callback that will fire when a layout animation on this component completes.
Callback function that fires when the pan gesture is recognised on this element.
The originating pointer event.
A {@link 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.Callback function that fires when the pan gesture ends on this element.
The originating pointer event.
A {@link 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.Callback function that fires when we begin detecting a pan gesture. This
is analogous to onMouseStart or onTouchStart.
The originating pointer event.
An {@link EventInfo} object containing x/y values for:
point: Relative to the device or page.Callback function that fires when the pan gesture begins on this element.
The originating pointer event.
A {@link 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.Callback when the tap gesture successfully ends on this element.
The originating pointer event.
An {@link TapInfo} object containing x and y values for the point relative to the device or page.
Callback when the tap gesture ends outside this element.
The originating pointer event.
An {@link TapInfo} object containing x and y values for the point relative to the device or page.
Callback when the tap gesture starts on this element.
The originating pointer event.
An {@link TapInfo} object containing x and y values for the point relative to the device or page.
Callback with latest motion values, fired max once per frame.
A callback that fires whenever the viewport-relative bounding box updates.
By 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.
The latest animated transform props.
The transform string as automatically generated by Framer Motion
This allows values to be transformed before being animated or set as styles.
For instance, this allows custom values in Framer Library like size to be converted into width and height.
It also allows us a chance to take a value like Color and convert it to an animatable color string.
A few structural typing changes need making before this can be a public property:
Target values to be appended by user-defined types (delete CustomStyles - does size throw a type error?)CustomValueType as a separate user-defined type (delete CustomValueType and animate a Color - does this throw a type error?).-
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.