Skip to main content

​
Overview

The MotionProps interface defines all props available on motion components. It extends MotionNodeOptions and adds support for the style prop with MotionValue support.

​
Import

import type { MotionProps } from "motion/react"

​
Type Definition

interface MotionProps extends MotionNodeOptions {
  style?: MotionStyle
  children?: React.ReactNode | MotionValue<number> | MotionValue<string>
}

​
Properties

​
style

​
style
MotionStyle
Enhanced style prop that accepts MotionValues and separate transform values.
interface MotionStyle extends MotionCSS, MotionTransform, MotionSVGProps {}
Supports:
  • All CSS properties
  • Separate transform properties (x, y, scale, rotate, etc.)
  • SVG-specific properties
  • MotionValue instances for any property
  • CSS variables

​
children

​
children
React.ReactNode | MotionValue<number> or MotionValue<string>
Standard React children or a MotionValue that resolves to text content.

​
MotionStyle Types

​
MotionCSS

All standard CSS properties with MotionValue support: 
type MotionCSS = MakeMotion<
  Omit<CSSProperties, "rotate" | "scale" | "perspective" | "x" | "y" | "z">
>
Example: 
<motion.div
  style={{
    opacity: motionValue,  // MotionValue<number>
    backgroundColor: "red", // string
    width: 100             // number
  }}
/>

​
MotionTransform

Transform properties as individual style properties: 
interface TransformProperties {
  x?: string | number
  y?: string | number
  z?: string | number
  translateX?: string | number
  translateY?: string | number
  translateZ?: string | number
  rotate?: string | number
  rotateX?: string | number
  rotateY?: string | number
  rotateZ?: string | number
  scale?: number
  scaleX?: number
  scaleY?: number
  scaleZ?: number
  skew?: string | number
  skewX?: string | number
  skewY?: string | number
  originX?: string | number
  originY?: string | number
  originZ?: string | number
  perspective?: number
  transformPerspective?: number
}
Example: 
<motion.div
  style={{
    x: 100,
    rotate: 45,
    scale: 1.2
  }}
/>

​
SVG Properties

SVG-specific animatable properties: 
interface SVGPathProperties {
  pathLength?: number
  pathOffset?: number
  pathSpacing?: number
}
Example: 
<motion.path
  style={{
    pathLength: motionValue
  }}
/>

​
MotionNodeOptions

MotionProps extends all options from MotionNodeOptions, which includes:

​
Animation Props

​
initial
VariantLabels | TargetAndTransition or boolean
Initial animation state
​
animate
VariantLabels | TargetAndTransition or AnimationControls
Target animation state
​
exit
VariantLabels or TargetAndTransition
Exit animation state
​
variants
Variants
Named animation variants
​
transition
Transition
Default transition configuration

​
Gesture Props

​
whileHover
VariantLabels or TargetAndTransition
Animation during hover
​
whileTap
VariantLabels or TargetAndTransition
Animation while pressed
​
whileFocus
VariantLabels or TargetAndTransition
Animation while focused
​
whileDrag
VariantLabels or TargetAndTransition
Animation while dragging
​
whileInView
VariantLabels or TargetAndTransition
Animation while in viewport

​
Drag Props

​
drag
boolean | x or y
Enable dragging
​
dragConstraints
Partial<BoundingBox> or RefObject<Element>
Drag constraints
​
dragElastic
number or Partial<BoundingBox>
Drag elasticity
​
dragMomentum
boolean
Enable drag momentum

​
Layout Props

​
layout
boolean | position | size or preserve-aspect
Enable layout animations
​
layoutId
string
Shared layout ID

​
Event Handlers

​
onUpdate
(latest: ResolvedValues) => void
Called on every frame during animation
​
onAnimationStart
(definition: AnimationDefinition) => void
Called when animation starts
​
onAnimationComplete
(definition: AnimationDefinition) => void
Called when animation completes
See the full list in the MotionNodeOptions reference.

​
Examples

​
Basic Props

import { motion, MotionProps } from "motion/react"

const props: MotionProps = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.5 }
}

function Component() {
  return <motion.div {...props}>Content</motion.div>
}

​
With MotionValues

import { motion, useMotionValue, MotionProps } from "motion/react"

function Component() {
  const x = useMotionValue(0)
  const opacity = useMotionValue(1)
  
  const props: MotionProps = {
    style: { x, opacity }
  }
  
  return <motion.div {...props}>Drag me</motion.div>
}

​
Typed Component Props

Extend MotionProps for custom components: 
import { motion, MotionProps } from "motion/react"
import { HTMLAttributes } from "react"

interface CardProps extends MotionProps, HTMLAttributes<HTMLDivElement> {
  title: string
  featured?: boolean
}

function Card({ title, featured, ...motionProps }: CardProps) {
  return (
    <motion.div
      {...motionProps}
      className={featured ? "featured" : undefined}
    >
      <h2>{title}</h2>
    </motion.div>
  )
}

// Usage
<Card
  title="Hello"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  whileHover={{ scale: 1.05 }}
/>

​
Generic Motion Component

Create reusable motion components: 
import { motion, MotionProps } from "motion/react"

function FadeIn(props: MotionProps) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      {...props}
    />
  )
}

​
With Variants

import { motion, MotionProps, Variants } from "motion/react"

const variants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

const props: MotionProps = {
  variants,
  initial: "hidden",
  animate: "visible"
}

function Component() {
  return <motion.div {...props}>Content</motion.div>
}

​
Helper Types

​
MakeMotion

Converts property types to accept MotionValues: 
type MakeMotion<T> = {
  [K in keyof T]: T[K] | MotionValue<T[K]>
}

​
MotionValue Types

type MotionValueNumber = MotionValue<number>
type MotionValueString = MotionValue<string>
type AnyMotionValue = MotionValueNumber | MotionValueString | MotionValue<any>

Transition

Transition configuration types

Variants

Variant definition types

AnimationOptions

Animation option types

MotionValue

MotionValue API reference

Build docs developers (and LLMs) love

Get started for freeTalk to us