Utils

Guides

Introduction

Animation

Components

Motion values

Hooks

Guides

React Three Fiber

React

Introduction

Animation

Utils

Guides

Introduction

Animation

Components

Motion values

Hooks

Guides

React Three Fiber

React

LazyMotion

Framer Motion is now Motion for React! Read more

LazyMotion

For ease of use, the motion component comes pre-bundled with all of its features for a bundlesize of around 34kb.

With LazyMotion and the m component, we can reduce this to 6kb for the initial render and then sync or async load a subset of features.

import { LazyMotion, domAnimations } from "motion/react"
import * as m from "framer-motion/m"

export const MyComponent = ({ isVisible }) => (
  <LazyMotion features={domAnimations}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)

Read the Reduce bundle size guide for full usage instructions.

Props

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

import { LazyMotion, domAnimations } from "motion/react"
import * as m from "motion/m"

export const MyComponent = ({ isVisible }) => (
  <LazyMotion features={domAnimations}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)

Async loading

Asynchronous loading can ensure your site is hydrated before loading in some or all animation functionality.

// features.js
import { domAnimations } from "framer-motion"
export default domAnimations
  
// index.js
const loadFeatures = import("./features.js")
  .then(res => res.default)

function Component() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div animate={{ scale: 1.5 }} />
    </LazyMotion>
  )
}

`strict`

Default: false

If true, will throw an error if a motion component renders within a LazyMotion component (thereby removing the bundlesize benefits of lazy-loading).

// 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={domAnimations} strict>
      <motion.div />
    </LazyMotion>
  )
}

AnimatePresence

LayoutGroup

Support Motion

Motion is open source. Sponsorships keep the project sustainable.

Every sponsor receives access to our private Discord, and an exclusive mobile and desktop wallpaper pack.

Become a sponsor