Documentation

Documentation

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>
  )
}

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!

MOTION+

Introducing Cursor

Cursor is a creative cursor component for React, that makes it super easy to make custom cursor and follow cursor effects.


Hover over these examples to check out some of what it can do:

Custom cursor

Follow with spring

Multicursor

?

?