Chapter 104: LazyMotion

Core Idea

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

Key Concepts

• Available features: There are currently two feature packages you can load:
• Synchronous loading: By passing one of these feature packages to LazyMotion
• Async loading: If you're using a bundler like Webpack or Rollup
• 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
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

import { m } from "motion-v"

• What it demonstrates: Core usage pattern for LazyMotion.

Key Takeaways

1. domAnimation: This provides supp.
2. LazyMotion supports Available features.
3. LazyMotion supports Synchronous loading.

Connects To

• Vue <motion /> component: related Motion doc page.
• MotionConfig: related Motion doc page.
• Vue animations with Motion for Vue: related Motion doc page.