LayoutCamera

Framer Motion's layout animations work via the transform style for the best possible performance. When HTML elements are transformed with a scale, they can become distorted.

With LayoutCamera, we can pre-distort a 3D scene so that when the CSS transform is applied, it looks correct throughout the layout animation.

#Usage

To implement LayoutCamera, we first need to replace Canvas from @react-three/fiber with MotionCanvas from framer-motion-3d.

Then, LayoutCamera can be added anywhere within MotionCanvas:

// index.js
import { motion } from "framer-motion"
import { Scene } from "./scene"

const fullscreen = { position: "fixed", inset: 0 }

export function App({ isFullscreen }) {
  return (
    <motion.div
      layout
      style={isFullscreen ? fullscreen : {}}
    >
      <Scene />
    </motion.div>
  )
}

// scene.js
import { MotionCanvas, LayoutCamera } from "framer-motion-3d"

export function Scene() {
  <MotionCanvas>
    <LayoutCamera position={[0, 0, 5]} />
    <Box />
  </MotionCanvas>
}

When a parent HTML motion component performs a layout animation, the perspective will be automatically corrected.

#Props

Internally, LayoutCamera renders a <motion.perspectiveCamera /> component, so it can accept all the usual React Three Fiber props like position and fov, as well as motion props like initial and animate.

<LayoutCamera
  position={[0, 0, 5]}
  animate={{ fov: 45 }}
  transition={{ duration: 2 }}
/>