Components
| Propriété | Type | Obligatoire | Valeur par défaut | Description | Condition |
|---|---|---|---|---|---|
variant | "plain" | "rich" | Non | plain | — | — |
trigger | Trigger | Trigger[] | Non | ['hover', 'focus'] | — | — |
initial | boolean | VariantLabels | TargetAndTransition | Non | — | 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) ```jsx // 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 }} /> ``` | — |
animate | boolean | VariantLabels | TargetAndTransition | LegacyAnimationControls | Non | — | Values to animate to, variant label(s), or `LegacyAnimationControls`. ```jsx // As values <motion.div animate={{ opacity: 1 }} /> // As variant <motion.div animate="visible" variants={variants} /> // Multiple variants <motion.div animate={["visible", "active"]} variants={variants} /> // LegacyAnimationControls <motion.div animate={animation} /> ``` | — |
exit | VariantLabels | TargetAndTransition | Non | — | 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. ```jsx 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> ) } ``` | — |
variants | Variants | Non | — | 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 `when`, 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. ```jsx const variants = { active: { backgroundColor: "#f00" }, inactive: { backgroundColor: "#fff", transition: { duration: 2 } } } <motion.div variants={variants} animate="active" /> ``` | — |
transition | Transition<any> | Non | — | Default transition. If no `transition` is defined in `animate`, it will use the transition defined here. ```jsx const spring = { type: "spring", damping: 10, stiffness: 100 } <motion.div transition={spring} animate={{ scale: 1.2 }} /> ``` | — |
onUpdate | (latest: ResolvedValues) => void | Non | — | Callback with latest motion values, fired max once per frame. ```jsx function onUpdate(latest) { console.log(latest.x, latest.opacity) } <motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} /> ``` | — |
onAnimationComplete | (definition: AnimationDefinition) => void | Non | — | Callback 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. ```jsx function onComplete() { console.log("Animation completed") } <motion.div animate={{ x: 100 }} onAnimationComplete={definition => { console.log('Completed animating', definition) }} /> ``` | — |
onPan | (event: PointerEvent, info: PanInfo) => void | Non | — | Callback 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](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) CSS rule. ```jsx function onPan(event, info) { console.log(info.point.x, info.point.y) } <motion.div onPan={onPan} /> ``` @param event - The originating pointer event. @param info - 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. | — |
onPanStart | (event: PointerEvent, info: PanInfo) => void | Non | — | Callback function that fires when the pan gesture begins on this element. ```jsx function onPanStart(event, info) { console.log(info.point.x, info.point.y) } <motion.div onPanStart={onPanStart} /> ``` @param event - The originating pointer event. @param info - 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. | — |
onPanSessionStart | (event: PointerEvent, info: EventInfo) => void | Non | — | Callback function that fires when we begin detecting a pan gesture. This is analogous to `onMouseStart` or `onTouchStart`. ```jsx function onPanSessionStart(event, info) { console.log(info.point.x, info.point.y) } <motion.div onPanSessionStart={onPanSessionStart} /> ``` @param event - The originating pointer event. @param info - An {@link EventInfo } object containing `x`/`y` values for: - `point`: Relative to the device or page. | — |
onPanEnd | (event: PointerEvent, info: PanInfo) => void | Non | — | Callback function that fires when the pan gesture ends on this element. ```jsx function onPanEnd(event, info) { console.log(info.point.x, info.point.y) } <motion.div onPanEnd={onPanEnd} /> ``` @param event - The originating pointer event. @param info - 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. | — |
onTap | (event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo) => void | Non | — | Callback when the tap gesture successfully ends on this element. ```jsx function onTap(event, info) { console.log(info.point.x, info.point.y) } <motion.div onTap={onTap} /> ``` @param event - The originating pointer event. @param info - An {@link TapInfo } object containing `x` and `y` values for the `point` relative to the device or page. | — |
onTapStart | (event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo) => void | Non | — | Callback when the tap gesture starts on this element. ```jsx function onTapStart(event, info) { console.log(info.point.x, info.point.y) } <motion.div onTapStart={onTapStart} /> ``` @param event - The originating pointer event. @param info - An {@link TapInfo } object containing `x` and `y` values for the `point` relative to the device or page. | — |
onTapCancel | (event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo) => void | Non | — | Callback when the tap gesture ends outside this element. ```jsx function onTapCancel(event, info) { console.log(info.point.x, info.point.y) } <motion.div onTapCancel={onTapCancel} /> ``` @param event - The originating pointer event. @param info - An {@link TapInfo } object containing `x` and `y` values for the `point` relative to the device or page. | — |
whileTap | VariantLabels | TargetAndTransition | Non | — | Properties or variant label to animate to while the component is pressed. ```jsx <motion.div whileTap={{ scale: 0.8 }} /> ``` | — |
globalTapTarget | boolean | Non | — | If `true`, the tap gesture will attach its start listener to window. Note: This is not supported publically. | — |
whileHover | VariantLabels | TargetAndTransition | Non | — | Properties or variant label to animate to while the hover gesture is recognised. ```jsx <motion.div whileHover={{ scale: 1.2 }} /> ``` | — |
onHoverStart | (event: MouseEvent, info: EventInfo) => void | Non | — | Callback function that fires when pointer starts hovering over the component. ```jsx <motion.div onHoverStart={() => console.log('Hover starts')} /> ``` | — |
onHoverEnd | (event: MouseEvent, info: EventInfo) => void | Non | — | Callback function that fires when pointer stops hovering over the component. ```jsx <motion.div onHoverEnd={() => console.log("Hover ends")} /> ``` | — |
whileFocus | VariantLabels | TargetAndTransition | Non | — | Properties or variant label to animate to while the focus gesture is recognised. ```jsx <motion.input whileFocus={{ scale: 1.2 }} /> ``` | — |
onDirectionLock | (axis: "x" | "y") => void | Non | — | Callback function that fires a drag direction is determined. ```jsx <motion.div drag dragDirectionLock onDirectionLock={axis => console.log(axis)} /> ``` @public | — |
onDragTransitionEnd | () => void | Non | — | Callback function that fires when drag momentum/bounce transition finishes. ```jsx <motion.div drag onDragTransitionEnd={() => console.log('Drag transition complete')} /> ``` @public | — |
drag | boolean | "x" | "y" | Non | — | 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. ```jsx <motion.div drag="x" /> ``` | — |
whileDrag | VariantLabels | TargetAndTransition | Non | — | Properties or variant label to animate to while the drag gesture is recognised. ```jsx <motion.div whileDrag={{ scale: 1.2 }} /> ``` | — |
dragDirectionLock | boolean | Non | — | If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`. ```jsx <motion.div drag dragDirectionLock /> ``` | — |
dragPropagation | boolean | Non | — | Allows drag gesture propagation to child components. Set to `false` by default. ```jsx <motion.div drag="x" dragPropagation /> ``` | — |
dragConstraints | false | Partial<BoundingBox> | { current: Element; } | Non | — | 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 from 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. ```jsx // 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> ) } ``` | — |
dragElastic | DragElastic | Non | — | The 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`. ```jsx <motion.div drag dragConstraints={{ left: 0, right: 300 }} dragElastic={0.2} /> ``` | — |
dragMomentum | boolean | Non | — | Apply momentum from the pan gesture to the component when dragging finishes. Set to `true` by default. ```jsx <motion.div drag dragConstraints={{ left: 0, right: 300 }} dragMomentum={false} /> ``` | — |
dragTransition | InertiaOptions | Non | — | 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 {@link https://motion.dev/docs/react-motion-component#dragtransition Inertia} for all properties you can use. ```jsx <motion.div drag dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }} /> ``` | — |
dragControls | any | Non | — | 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. ```jsx const dragControls = useDragControls() function startDrag(event) { dragControls.start(event, { snapToCursor: true }) } return ( <> <div onPointerDown={startDrag} /> <motion.div drag="x" dragControls={dragControls} /> </> ) ``` | — |
dragSnapToOrigin | boolean | Non | — | If 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. | — |
dragListener | boolean | Non | — | 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. ```jsx const dragControls = useDragControls() function startDrag(event) { dragControls.start(event, { snapToCursor: true }) } return ( <> <div onPointerDown={startDrag} /> <motion.div drag="x" dragControls={dragControls} dragListener={false} /> </> ) ``` | — |
onMeasureDragConstraints | (constraints: BoundingBox) => void | BoundingBox | Non | — | If `dragConstraints` is set to a React ref, this callback will call with the measured drag constraints. @public | — |
_dragX | MotionValue<number> | Non | — | 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. @public | — |
_dragY | MotionValue<number> | Non | — | 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. @public | — |
layout | boolean | "position" | "size" | "preserve-aspect" | Non | — | If `true`, this component will automatically animate to its new position when its layout changes. ```jsx <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 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. @public | — |
layoutId | string | Non | — | Enable 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. ```jsx {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. @public | — |
layoutDependency | any | Non | — | @public | — |
layoutScroll | boolean | Non | — | Whether a projection node should measure its scroll when it or its descendants update their layout. @public | — |
layoutRoot | boolean | Non | — | Whether 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. | — |
data-framer-portal-id | string | Non | — | Attached to a portal root to ensure we attach the child to the document root and don't perform scale correction on it. | — |
layoutCrossfade | boolean | Non | — | By default, shared layout elements will crossfade. By setting this to `false`, this element will take its default opacity throughout the animation. | — |
custom | any | Non | — | Custom data to use to resolve dynamic variants differently for each animating component. ```jsx 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} /> ``` @public | — |
inherit | boolean | Non | — | @public Set to `false` to prevent inheriting variant changes from its parent. | — |
ignoreStrict | boolean | Non | — | @public Set to `false` to prevent throwing an error when a `motion` component is used within a `LazyMotion` set to strict. | — |
values | { [key: string]: MotionValue<number> | MotionValue<string>; } | Non | — | Provide a set of motion values to perform animations on. | — |
transformTemplate | TransformTemplate | Non | — | By default, 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. ```jsx <motion.div style={{ x: 0, rotate: 180 }} transformTemplate={ ({ x, rotate }) => `rotate(${rotate}deg) translateX(${x}px)` } /> ``` @param transform - The latest animated transform props. @param generatedTransform - The transform string as automatically generated by Motion @public | — |