LayoutOrthographicCamera

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 LayoutOrthographicCamera, 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 LayoutOrthographicCamera, we first need to replace Canvas from @react-three/fiber with MotionCanvas from framer-motion-3d.

Then, LayoutOrthographicCamera 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>
    <LayoutOrthographicCamera position={[0, 0, 5]} zoom={40} />
    <Box />
  </MotionCanvas>
}

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

#Props

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

<LayoutCamera
  position={[0, 0, 5]}
  zoom={20}
  animate={{ zoom: 100 }}
  transition={{ duration: 2 }}
/>