Lazy Motion

Documentation

Lazy Motion

Reading Time:

1

min

Released

October 2, 2023

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

Istanbul

Follow us on social media