Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
DocumentationComponents
LazyMotion
  • Overview
  • Motion
  • Handshake
  • Guides
  • API Documentation
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
DocumentationComponents
LazyMotion
  • Overview
  • Motion
  • Handshake
  • Guides
  • API Documentation
Getting started
  • Introduction
  • Examples
API
  • Animation
  • Transition
  • Gestures
  • MotionValue
  • Utilities
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Motion resources
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Code in Framer
  • Utilities
  • RenderTarget
  • Property Controls
Community
  • GitHub
  • Discord

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
  • Props

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement