Motion
Back to framer.com
Documentation3D
LayoutCamera
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

LayoutCamera

A perspective camera that integrates React Three Fiber 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 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 }}
/>
Previous3D: IntroductionNextLayoutOrthographicCamera
On this page
  • Usage
  • Props

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement