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 4.6kb for the initial render and then sync or async load a subset of features.
import { LazyMotion, domAnimation } from "motion/react"
import * as m from "motion/react-m"
export const MyComponent = ({ isVisible }) => (
<LazyMotion features={domAnimation}>
<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, domAnimation } from "motion/react"
import * as m from "motion/react-m"
export const MyComponent = ({ isVisible }) => (
<LazyMotion features={domAnimation}>
<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 { domAnimation } from "motion/react"
export default domAnimation
// 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={domAnimation} strict>
<motion.div />
</LazyMotion>
)
}
