Getting started
API
Components
3D
Motion resources
Code in Framer
Community

LazyMotion

Reduce bundle size by lazy-loading a subset of Motion's features.

The LazyMotion component can help you reduce bundle size by synchronously or asynchronously loading some, or all, of the motion component's features.

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


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

By default, the motion component comes pre-bundled with all of its features. The m component can be used in exactly the same way as motion, but it comes with no features preloaded. These are then provided by LazyMotion.

This can cut initial bundle sizes down to under 5kb.

Read the Reduce bundle size guide for full usage instructions.

#Props

#features: FeatureBundle | LazyFeatureBundle

Can be used to provide a feature bundle synchronously or asynchronously.

// features.js
import { domAnimations } from "framer-motion"
export default domAnimations


// index.js
import { LazyMotion, m } from "framer-motion"


const loadFeatures = import("./features.js")
  .then(res => res.default)


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

#strict: boolean

If true, will throw an error if a motion component renders within a LazyMotion component.

// 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={domAnimation} strict>
      <motion.div />
    </LazyMotion>
  )
}
PreviousLayoutGroupNextMotionConfig
On this page