<!-- Source: https://motion.svelte.page/docs/lazy-motion -->

# LazyMotion

> Load only the motion feature bundle your page needs

**Source:** [https://motion.svelte.page/docs/lazy-motion](https://motion.svelte.page/docs/lazy-motion)

---

`LazyMotion` pairs with the `m` namespace to choose which runtime features are active for a subtree. It mirrors Framer Motion's bundle split while keeping the default `motion` export unchanged.

```svelte
<script>
    import { LazyMotion, domAnimation, m } from '@humanspeak/svelte-motion'
</script>

<LazyMotion features={domAnimation}>
    <m.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        whileHover={{ scale: 1.05 }}
    />
</LazyMotion>
```

## Feature bundles

| Bundle | Includes |
|---|---|
| `domMin` | mount/update animations |
| `domAnimation` | animations plus hover, tap, focus, pan, and in-view gestures |
| `domMax` | everything in `domAnimation` plus drag and layout animations |

Use `domAnimation` for most interface motion. Use `domMin` for pages that only need entrance/update animation. Use `domMax` when the subtree uses `drag`, `layout`, or `layoutId`.

## Async loading

`features` can also be a function returning a promise. The subtree renders with `domMin` first, then upgrades when the bundle resolves.

```svelte
<script>
    import { LazyMotion, domAnimation, m } from '@humanspeak/svelte-motion'

    const loadFeatures = async () => domAnimation
</script>

<LazyMotion features={loadFeatures}>
    <m.button whileHover={{ scale: 1.08 }}>Hover me</m.button>
</LazyMotion>
```

## Related

- [Tree Shaking](/docs/tree-shaking) — Import only the components you use
- [Gestures](/docs/gestures) — Hover, tap, focus, pan, and in-view states
- [Drag](/docs/drag) — Drag requires `domMax`
