Motion
Back to framer.com
Documentation3D
MotionCanvas
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
Hooks
  • useAnimate
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
Universal
  • animate
  • transform
  • stagger
  • Easing functions
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

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>
)
}

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.

PreviousLayoutOrthographicCameraNextAccessibility

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement