Function LazyMotion

Used in conjunction with the m component to reduce bundle size.

m is a version of the motion component that only loads functionality critical for the initial render.

LazyMotion can then be used to either synchronously or asynchronously load animation and gesture support.

// Synchronous loading
import { LazyMotion, m, domAnimation } from "framer-motion"

function App() {
  return (
    <LazyMotion features={domAnimation}>
      <m.div animate={{ scale: 2 }} />
    </LazyMotion>
  )
}

// Asynchronous loading
import { LazyMotion, m } from "framer-motion"

function App() {
  return (
    <LazyMotion features={() => import('./path/to/domAnimation')}>
      <m.div animate={{ scale: 2 }} />
    </LazyMotion>
  )
}
Copy