MotionCanvas

A Canvas component for linking Framer Motion with Framer Motion 3D.

React Three Fiber (R3F) uses the Canvas component to establish a 3D scene. Using this component will break context with parent components.

To link Framer Motion 3D context with Framer Motion, for instance to share a default transition or link the LayoutCamera with layout animations, the MotionCanvas component can be used instead.

import { MotionConfig, motion } from "framer-motion"
import { MotionCanvas, motion as motion3d } from "framer-motion-3d"

export function App() {
  return (
    <MotionConfig transition={{ type: "spring" }}>
      <motion.div animate={{ scale: 2 }}>
        <MotionCanvas>
          <motion3d.boxGeometry animate={{ x: 1 }} />
        </MotionCanvas>
      </motion.div>
    </MotionConfig>
  )
}

import { MotionConfig, motion } from "framer-motion"
import { MotionCanvas, motion as motion3d } from "framer-motion-3d"

export function App() {
  return (
    <MotionConfig transition={{ type: "spring" }}>
      <motion.div animate={{ scale: 2 }}>
        <MotionCanvas>
          <motion3d.boxGeometry animate={{ x: 1 }} />
        </MotionCanvas>
      </motion.div>
    </MotionConfig>
  )
}

It shares all the same props as R3F's Canvas component, with the omission of resize, as MotionCanvas implements its own resize options to sync with Framer Motion's layout animations.

PreviousLayoutOrthographicCamera NextAccessibility