Documentation

Documentation

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

React

LazyMotion

LazyMotion

For ease of use, the motion component comes pre-bundled with all of its features for a bundlesize of around 34kb.

With LazyMotion and the m component, we can reduce this to 6kb for the initial render and then sync or async load a subset of features.

import { LazyMotion, domAnimations } from "motion/react"
import * as m from "motion/react-m"

export const MyComponent = ({ isVisible }) => (
  <LazyMotion features={domAnimations}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)

Read the Reduce bundle size guide for full usage instructions.

Props

features

Define a feature bundle to load sync or async.

Sync loading

Synchronous loading is useful for defining a subset of functionality for a smaller bundlesize.

import { LazyMotion, domAnimations } from "motion/react"
import * as m from "motion/react-m"

export const MyComponent = ({ isVisible }) => (
  <LazyMotion features={domAnimations}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)

Async loading

Asynchronous loading can ensure your site is hydrated before loading in some or all animation functionality.

// features.js
import { domAnimations } from "motion/react"
export default domAnimations
  
// index.js
const loadFeatures = import("./features.js")
  .then(res => res.default)

function Component() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div animate={{ scale: 1.5 }} />
    </LazyMotion>
  )
}

strict

Default: false

If true, will throw an error if a motion component renders within a LazyMotion component (thereby removing the bundlesize benefits of lazy-loading).

// This component will throw an error that explains using a motion component
// instead of the m component will break the benefits of code-splitting.
function Component() {
  return (
    <LazyMotion features={domAnimations} strict>
      <motion.div />
    </LazyMotion>
  )
}

Cursor

Cursor

LayoutGroup

LayoutGroup

A Motion+ membership will give you early access to features & content, access to our private Github and Discord, and more.

It's a one-time fee that grants lifetime access. No subscription necessary!

Learn more

Learn more

Learn more

MOTION+

Premium React components

Motion+ is a one-time fee, lifetime membership that supports Motion and grants access to the source code of an ever-growing library of examples.


You also gain access to Cursor and AnimateNumber, two exclusive new React components. Check out what they can do:

Get Motion+

Get Motion+