Motion components

There's a motion component for every HTML and SVG element, for instance motion.div, motion.circle etc.

These work exactly like their static counterparts, but offer props that allow you to:

• Animate

• Add drag, pan, hover and tap gestures

• Respond to gestures and elements entering the viewport with animation

• Deeply animate throughout React trees via variants

And much more.

Supported values

Value types

Motion can animate:

• Numbers: 0, 10 etc.

• Strings containing numbers: "0vh", "10px" etc.

• Colors: Hex, RGB, HSLA.

• Complex strings containing multiple numbers and/or colors (ie "10px 0 #000")

When animating to a non-animatable value like "block", this value will be set instantly. By setting this value within transitionEnd, this value will be set at the end of the animation.

<motion.div
  animate={{
    x: 0,
    backgroundColor: "#000",
    boxShadow: "10px 10px 0 rgba(0, 0, 0, 0.2)",
    position: "fixed",
    transitionEnd: {
      display: "none",
    },
  }}
/>

Value type conversion

In general, values can only be animated between two of the same type (ie two px, two % etc).

However, HTML component's x, y, width, height, top, left, right and bottom values have enhanced support and can all be animated freely between different value types.

<motion.div
  initial={{ x: "100%" }}
  animate={{ x: "calc(100vw - 50%)" }}
/>

Additionally, any color type (hex, HSL, RGB) can animate between each other.

Transform

Transform properties are accelerated by the GPU, and therefore animate smoothly. They can be set and animated individually as:

• Translate shortcuts: x, y, z

• Translate: translateX, translateY, translateZ

• Scale: scale, scaleX, scaleY

• Rotate: rotate, rotateX, rotateY, rotateZ

• Skew: skew, skewX, skewY

• Perspective: transformPerspective

motion components have enhanced style props, allowing you to set them individually there, too.

<motion.a
  whileHover={{ scale: 1.2 }}
  whileTap={{ scale: 0.8 }}
  style={{ x: 100 }}
/>

For convenience, transform values are applied in a specific order: translate, scale, rotate, skew.

However, you can customize this default order using the transformTemplate prop.

function template({ rotate, x }) {
  return `rotate(${rotate}) translateX(${x})`
}

return (
  <motion.div
    transformTemplate={template}
    animate={{ rotate: 360 }}
    style={{ rotate: 0, x: "calc(50vh - 100px)" }}
  />
)

SVG note: For SVG components, x and y attributes (as opposed to the transform style) can be set using attrX and attrY within animation props.

Transform origin

transform-origin has three shortcut values that can be set and animated individually:

• originX

• originY

• originZ

If set as numbers, originX and Y default to a progress value between 0 and 1. originZ defaults to pixels.

<motion.div style={{ originX: 0.5 }} />

CSS variables

Motion can animate the value of CSS variables, and also read CSS variables as animation targets.

Using pre-defined CSS variables in animation

HTML motion components can animate to and from CSS variables, as long as that variable is defined on a component ancestor.

<motion.li animate={{ background: "var(--action)" }} />

Animating CSS variables

By defining and animating CSS variables, we can use a parent motion component to declaratively animate multiple DOM children.

When animating CSS variables in TypeScript, the prop will need to be cast as any to prevent type errors (as there's an infinite number of variable names).

CSS variables are also of an arbitary type, so Motion can't infer their default type. You're able to animate rotate as a number because Motion understands that it should be set as deg, whereas '--rotate' needs to be explicitly set with the unit type, e.g. '360deg'.

<motion.ul
  initial={{ '--rotate': '0deg' } as any}
  animate={{ '--rotate': '360deg' } as any}
  transition={{ duration: 2, repeat: Infinity }}
>
  <li style={{ transform: 'rotate(var(--rotate))' }} />
  <li style={{ transform: 'rotate(var(--rotate))' }} />
  <li style={{ transform: 'rotate(var(--rotate))' }} />
</motion.ul>

SVG line drawing

Line drawing animations can be created with many SVG elements using three special properties: pathLength, pathSpacing and pathOffset.

These are all set as a value between 0 and 1, where 1 is the measured length of the path.

Path animations are compatible with circle, ellipse, line, path, polygon, polyline and rect elements.