LazyMotion

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.

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

<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

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.

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

<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 — Import only the components you use
• Gestures — Hover, tap, focus, pan, and in-view states
• Drag — Drag requires domMax