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.
// Reactimport { LazyMotion, domAnimations, m } from "framer-motion"
// React Server Componentsimport { LazyMotion, domAnimations } from "framer-motion"import * as m from "framer-motion/m"
export const MyComponent = ({ isVisible }) => ( <LazyMotion features={domAnimations}> <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.jsimport { domAnimations } from "framer-motion"export default domAnimations
// index.jsimport { 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={domAnimations} strict> <motion.div /> </LazyMotion> )}