Motion
Back to framer.com
Documentation3D
LayoutOrthographicCamera
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Utilities
  • animate
  • transform
  • useAnimationControls
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

LayoutOrthographicCamera

An orthographic camera that integrates with Framer Motion's layout animations.

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 }}
/>
PreviousLayoutCameraNextMotionCanvas
On this page
  • Usage
  • Props

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement