Istanbul Docs

v1.0

Getting Started

COMPONENTS

Motion Config

Lazy Motion

Layout Group

HOOKS

Use Drag Controls

Use Animation Frame

Introduction

ANIMATIONS

Animate Presence

Scroll animations

Get Started

Istanbul Docs

v1.0

Back to Homepage

Documentation

Lazy Motion

Lazy Motion

Reading Time:

1

min

Released

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>
)
import { LazyMotion, domAnimation, m } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
  <LazyMotion features={domAnimation}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)
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>
  )
}
// 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>
  )
}
// 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>
  )
}
// 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>
  )
}
// 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>
  )
}

Previous
Document

Next
Document

Istanbul

Follow us on social media