Chapter 23: LazyMotion

Core Idea

Reduce your initial bundle size with LazyMotion in Motion for React. Load animation features synchronously or asynchronously, shrinking bundles to as low as 4.6kb.

Key Concepts

• Props: Define a feature bundle to load sync or async.
• 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.
• Async loading: Asynchronous loading can ensure your site is hydrated before loading in some or all animat
• strict: Default: false
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

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

• What it demonstrates: Core usage pattern for LazyMotion.

Key Takeaways

1. LazyMotion supports Props.
2. LazyMotion supports features.
3. LazyMotion supports Sync loading.

Connects To

• React motion component: related Motion doc page.
• Reduce bundle size of Framer Motion: related Motion doc page.
• MotionConfig: related Motion doc page.